#### 默认

:::demo

```html
<!--
 * @Author       : xh
 * @Date         : 2022-12-01 14:33:01
 * @LastEditors: y001554
 * @FileName     :   
-->
<template>
  <div>
    <el-button size="small" type="primary" @click="show">弹出弹窗</el-button>
    <gen-drawer v-bind="$attrs" type="large" v-on="$listeners">
      <div>
        <el-table ref="table" height="100%" :data="tableData" header-row-class-name="tbheader" size="mini" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="150" fixed="left" />
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="date" label="日期" width="150" />
          <el-table-column prop="date" label="日期" width="150" />

          <el-table-column prop="name" label="姓名" width="150" />
          <el-table-column prop="address" label="地址" show-overflow-tooltip />

          <el-table-column prop="address" label="操作" fixed="right" show-overflow-tooltip>
            <el-button type="primary" size="mini"> XXX </el-button>
          </el-table-column>
        </el-table>
      </div>
    </gen-drawer>
  </div>
</template>

<script>
  // import Modal from '@/components/Layout/modal'
  import { dataExportList } from '@/api/export'
  const defaultModel = {
    value1: [],
    value2: ''
  }
  export default {
    name: 'DemoDrawer',
    // components: { Modal },
    data() {
      return {
        loading: true,
        dialog: {
          width: '490px',
          visible: false,
          title: '弹出窗',
          closeOnClickModal: false
        },
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },

          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },

          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },

          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        rules: {}
      }
    },
    created() {
      console.log(0, this.$props, this.$attrs, this.$listeners)
      // this.show()
    },
    methods: {
      cancel() {
        this.$ui.hide('DemoDrawer')
      },
      show() {
        // this.$ui.hide('DemoDrawer')
        this.$ui.show('DemoDrawer')
      },

      // 保存
      handleSave() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.loading = true
            this.$request(dataExportList, this.form.model).then((res) => {
              if (res.code === 1) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.$emit('refresh')
                this.settings.visible = false
              }
            })
            this.loading = false
          }
        })
      },
      // 取消
      handleCancel() {
        this.form.model = Object.assign({}, defaultModel)
        this.dialog.visible = false
      }
    }
  }
</script>
```

:::
