Header

Body

然后把抽屉组件放在el-main中
关于el-drewer的需要用到的属性
visible.sync   是否显示 Drawer，支持 .sync 修饰符
with-header    控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效
direction      Drawer 打开的方向
需要给el-main也就是el-drawer的父组件加上style样式 
overflow: hidden;
position: relative; 
给el-drawer加上样式 style="position:absolute" 
并且设置z-index = “-1”         ！！！一定要加，要不然遮罩层会把顶部标题给遮住 
z-index在elementUI中并没有说明，是通过谷歌的vue插件看到的 
如何在谷歌中加入vue插件 
https://blog.csdn.net/yizufengdou/article/details/103985709 
下面是全部代码 
<template>
    <div calss="container">
        <el-header>
            <i class="el-icon-s-unfold" @click="visible = true"></i>
            <h2 style="display: inline-block;margin-left: 20px">Header</h2>
        </el-header>
        <el-main>
            <el-drawer
                    title="我是标题"
                    :visible.sync="visible"
                    :with-header=false
                    style="position: absolute"
                    direction="ltr"
                    z-index="-1"
                <span>抽屉组件</span>
            </el-drawer>
            <h1>Body</h1>
        </el-main>
</template>
<script>
    // @ is an alias to /src
    export default {
        name: 'main',
        data() {
            return {
                visible: false,
        methods: {
            handleClose(done) {
                done()
</script>
<style>
    .el-header {
        color: #333;
        padding: 0 !important;
        height: 50px!important;
        background: antiquewhite;
    .el-main {
        height: 100%;
        padding: 0!important;
        overflow: hidden;
        position: relative;
</style> 
                    实现如图elementUI官网实现的样例都是在整个屏幕展开抽屉需要实现的是，点击头部的按钮，只在子组件展开抽屉且遮罩不遮住头部，需实现的样式如上图实现方法在mian.vue页面中也就是页面嵌套的父组件首先把页面分成上下两块布局&lt;template&gt;    &lt;div calss="container"&gt;        &lt;el-header&gt;            &lt;i class="el-icon-s-unfold" @click="
3.添加/deep/ 或::v-deep
      /deep/ .el-pagination.is-background 
      .el-pager li:not(.disabled).active {
        background-color: #ff6600;
      ::v-deep .el-paginat
				可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页  shiftKey+上键 上一页    shiftKey加下键 下一页  shiftKey加左键 开启弹框展示第一条数据   shiftKey加右键关闭弹框上代码
js实现拉伸部分......
				在Vue.js中，可以使用Element UI库来创建弹出框（dialog）组件。要实现点击弹出框的X按钮时触发的事件，你可以按照以下步骤进行操作：
1. 首先，确保已经正确引入Vue和Element UI库。可以使用npm或直接引入CDN链接。
2. 在Vue组件中使用el-dialog组件，例如：
```html
<template>
    <el-dialog
      title="弹出框标题"
      :visible.sync="dialogVisible"
      @close="handleClose"
      <!-- 弹出框内容 -->
    </el-dialog>
</template>
3. 在Vue组件的`data`属性中定义一个`dialogVisible`变量来控制弹出框的显示与隐藏：
```javascript
export default {
  data() {
    return {
      dialogVisible: false
  // ...
4. 在Vue组件的`methods`中定义一个`handleClose`方法，用于处理点击弹出框的X按钮事件：
```javascript
export default {
  // ...
  methods: {
    handleClose() {
      // 这里是点击弹出框的X按钮时要执行的逻辑
5. 现在，当你点击弹出框的X按钮时，会调用`handleClose`方法。
注意：上述代码中的"弹出框内容"部分需要根据你的实际需求进行填充，可以在el-dialog组件内部添加其他元素、组件或文本。
希望这个回答能够帮助你解决问题！如有任何疑问，请随时提问。