br-dionysus 1.17.1 → 1.17.3

package/README.md

@@ -956,472 +956,144 @@ const options: Option[] = [{
 
 <template>
   <div class="g-box">
-    <h3>普通表格</h3>
-    <MTable
-      :data="tableData1"
-      border
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      @selectionChange="handleSelectionChange"
-    >
-      <el-table-column
-        fixed="left"
-        type="selection"
-      />
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      ></MTableColumn>
-    </MTable>
+    <!--<DemoTest1></DemoTest1>-->
+    <!--<el-divider />-->
 
-    <h3>展开列</h3>
-    <p @click="zzzz">{{ tableConfig }}</p>
-    <MTable
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      rowKey="id"
-      tableConfigKey="tableConfigKey"
-      expandProp="sn"
-      @privateExpandChange="privateExpandChange"
-    >
-      <el-table-column
-        fixed="left"
-        type="selection"
-      />
-      <MTableColumn
-        type="expand"
-        width="1"
-      >
-        <template #default="props">
-          <h1>index{{ props.index }}</h1>
-          <h1>$index{{ props.$index }}</h1>
-          <h1>测试</h1>
-        </template>
-      </MTableColumn>
-      <el-table-column
-        prop="name"
-        label="名称"
-      >
-        <el-table-column
-          prop="date"
-          label="时间"
-        ></el-table-column>
-        <el-table-column
-          prop="address"
-          label="地址"
-        ></el-table-column>
-      </el-table-column>
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      >
-      </MTableColumn>
-    </MTable>
+    <!--<DemoTest2></DemoTest2>-->
+    <!--<el-divider />-->
 
-    <h3>树状表格</h3>
-    <MTable
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      rowKey="id"
-      tableConfigKey="tableConfigKey"
-      @expandChange="privateExpandChange"
-    >
+    <!--<DemoTest3></DemoTest3>-->
+    <!--<el-divider />-->
+
+    <!--<DemoTest4></DemoTest4>-->
+    <!--<el-divider />-->
+
+    <DemoTest5></DemoTest5>
+    <el-divider />
+  </div>
+</template>
+
+<script setup lang="ts">
+// import DemoTest1 from 'packages/MTable/docs/DemoTest1.vue'
+// import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
+// import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
+// import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
+import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                      | 说明                          | 类型                    | 可选值 | 默认值                                                 |
+|-------------------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
+| data                    | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
+| sole                    | 行的唯一值                       | String , number       | -   | key                                                 |
+| filtersValue            | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
+| expandProp              | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
+| tableConfigKey          | 表格配置key                     | string                | -   | ''                                                  |
+| showSelectionCellStatus | 显示单元格选中状态                   | boolean               | -   | false                                               |
+| selectionCell           | 选中列(必须showSelection为true)   | string                | -   | ''                                                  |
+| 其余参数                    | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
+
+## 要求
+
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+
+| 方法名                  | 说明                                   | 回调参数                                                |
+|----------------------|--------------------------------------|-----------------------------------------------------|
+| pasteData            | 表格粘贴方法                               | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData       |
+| update:tableConfig   | 表格配置更新                               | \[tableConfig: TableConfig]                         |
+| privateExpandChange  | expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]]                     |
+| update:selectionCell | 选中单元格更新                              | \[string]                                           |
+| 其余方法                 | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) Exposes
+
+| 方法名           | 说明           | 回调参数                                                |
+|---------------|--------------|-----------------------------------------------------|
+| getTableTitle | 获取表格头信息      | tableTitle: TableTitle[]                            |
+| 其余方法          | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |
+
+### 5) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+
+### 5) MBatchEdit（批量编辑组件）
+
+#### 1) Attributes
+
+| 参数             | 说明                                        | 类型                                                            | 可选值                      | 默认值  |
+|----------------|-------------------------------------------|---------------------------------------------------------------|--------------------------|------|
+| selectionCell  | 选中列                                       | string                                                        | -                        | ''   |
+| size           | 组件大小                                      | string                                                        | 'small' \| 'large' \| '' | ''   |
+| tableData      | 表格数据                                      | Record<string, any>[]                                         | -                        | []   |
+| tableTitle     | 表格列配置                                     | TableTitle[] \| null                                          | -                        | null |
+| relevancyTable | 关联表格（与tableTitle属性互斥，同时存在时只有tableTitle生效） | InstanceType<typeof import('packages/MTable').MTable> \| null | -                        | null |
+
+#### 2) Events
+
+| 方法名              | 说明     | 回调参数                            |
+|------------------|--------|---------------------------------|
+| update:tableData | 表格数据更新 | \[data:  Record<string, any>[]] |
+
+
+
+
+表格列组件
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-box">
+    <el-table :data="tableData">
       <MTableColumn
         v-for="item in tableTitle"
         :key="item.prop"
         :prop="item.prop"
         :label="item.label"
-        :align="item.align"
         :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
         v-model:filtersValue="filtersValue"
         showOverflowTooltip
+        :children="item.children || []"
       >
       </MTableColumn>
-    </MTable>
-
-    <h3>批改</h3>
-    <MBatchEdit
-      size="small"
-      v-model:tableData="tableData1"
-      :selectionCell="selectionCell"
-      :relevancyTable="mTableRef"
-    ></MBatchEdit>
-    <MTable
-      ref="mTableRef"
-      :data="tableData1"
-      border
-      scrollbarAlwaysOn
-      showSelectionCellStatus
-      v-model:selectionCell="selectionCell"
-    >
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        :isBatchEdit="item.isBatchEdit"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      ></MTableColumn>
-      <MTableColumn
-        prop="prop"
-        label="label"
-        showOverflowTooltip
-      ></MTableColumn>
-    </MTable>
-    <p>选中的单元格：{{ selectionCell }}</p>
+    </el-table>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from './../../index'
-import { MTableColumn } from './../../MTableColumn'
-import MBatchEdit from './../src/MBatchEdit.vue'
-
-const privateExpandChange = (row: any, expandedRows: any[]) => {
-  console.log('row', row)
-  console.log('expandedRows', expandedRows)
+interface FilterValue {
+  [key: string]: Array<string | number>
 }
-
-const tableData = ref<any[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
-  label: '序号',
-  prop: 'sn',
-  minWidth: 200,
-  fixed: 'left',
-  isBatchEdit: false
-}, {
-  label: '时间',
-  prop: 'date',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '地址',
-  prop: 'address',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '名称',
-  prop: 'name',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '数量',
-  prop: 'qty',
-  minWidth: 200,
-  isBatchEdit: true
-}], tableData)
-
-// const childTableTitle: TableTitle[] = [{
-//   label: '序号',
-//   prop: 'sn',
-//   minWidth: 200,
-//   fixed: 'left'
-// }, {
-//   label: '时间',
-//   prop: 'date',
-//   minWidth: 200
-// }, {
-//   label: '地址',
-//   prop: 'address',
-//   minWidth: 200
-// }, {
-//   label: '名称',
-//   prop: 'name',
-//   minWidth: 200
-// }]
-const zzzz = () => {
-  filtersValue.value = {}
-}
-tableData.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0
-}, {
-  id: 2,
-  sn: 2,
-  date: '2016-05-02',
-  name: 'Tom2',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  children: [{
-    id: 21,
-    sn: 1,
-    date: '2016-05-02',
-    name: 'Tom21',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }, {
-    id: 22,
-    sn: 2,
-    date: '2016-05-02',
-    name: 'Tom22',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }]
-}, {
-  id: 3,
-  sn: 3,
-  date: '2016-05-04',
-  name: 'Tom3',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0
-}, {
-  id: 4,
-  sn: 4,
-  date: '2016-05-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}, {
-  id: 5,
-  sn: 5,
-  date: '2016-05-05',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}, {
-  id: 6,
-  sn: 6,
-  date: '2016-06-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}]
-
-const tableData1 = ref<any[]>([])
-tableData1.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 10
-}, {
-  id: 2,
-  sn: 2,
-  date: '2016-05-02',
-  name: 'Tom2',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 101
-}, {
-  id: 3,
-  sn: 3,
-  date: '2016-05-04',
-  name: 'Tom3',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 102
-}, {
-  id: 4,
-  sn: 4,
-  date: '2016-05-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 103
-}, {
-  id: 5,
-  sn: 5,
-  date: '2016-05-05',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 104
-}, {
-  id: 6,
-  sn: 6,
-  date: '2016-06-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 105
-}]
-
-// 选中项
-const multipleSelection = ref<number[]>([])
-const handleSelectionChange = (val: any[]) => {
-  multipleSelection.value = val.map(item => item.sn)
-  tableData1.value[0].name = tableData1.value[0].name + 'd'
-}
-
-/**
- * 批量修改
- * */
-const selectionCell = ref<string>('')
-const mTableRef = ref<any | null>(null)
-</script>
-
-<style lang="scss" scoped>
-.g-box {
-  max-width: 1000px;
-}
-</style>
-
-
-```
-
-### 2) Attributes
-
-| 参数                      | 说明                          | 类型                    | 可选值 | 默认值                                                 |
-|-------------------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
-| data                    | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
-| sole                    | 行的唯一值                       | String , number       | -   | key                                                 |
-| filtersValue            | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
-| expandProp              | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
-| tableConfigKey          | 表格配置key                     | string                | -   | ''                                                  |
-| showSelectionCellStatus | 显示单元格选中状态                   | boolean               | -   | false                                               |
-| selectionCell           | 选中列(必须showSelection为true)   | string                | -   | ''                                                  |
-| 其余参数                    | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
-
-## 要求
-
-```
-sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
-```
-
-### 3) Events
-
-| 方法名                  | 说明                                   | 回调参数                                                |
-|----------------------|--------------------------------------|-----------------------------------------------------|
-| pasteData            | 表格粘贴方法                               | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData       |
-| update:tableConfig   | 表格配置更新                               | \[tableConfig: TableConfig]                         |
-| privateExpandChange  | expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]]                     |
-| update:selectionCell | 选中单元格更新                              | \[string]                                           |
-| 其余方法                 | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
-
-### 4) Exposes
-
-| 方法名           | 说明           | 回调参数                                                |
-|---------------|--------------|-----------------------------------------------------|
-| getTableTitle | 获取表格头信息      | tableTitle: TableTitle[]                            |
-| 其余方法          | 参考el官网的table | https://element-plus.org/zh-CN/component/table.html |
-
-### 5) PasteAction
-
-| 参数         | 说明                                     | 类型     | 
-|------------|----------------------------------------|--------|
-| editRow    | 返回粘贴的对应行的原始数据                          | Object |
-| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
-| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
-| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
-
-### 5) MBatchEdit（批量编辑组件）
-
-#### 1) Attributes
-
-| 参数             | 说明                                        | 类型                                                            | 可选值                      | 默认值  |
-|----------------|-------------------------------------------|---------------------------------------------------------------|--------------------------|------|
-| selectionCell  | 选中列                                       | string                                                        | -                        | ''   |
-| size           | 组件大小                                      | string                                                        | 'small' \| 'large' \| '' | ''   |
-| tableData      | 表格数据                                      | Record<string, any>[]                                         | -                        | []   |
-| tableTitle     | 表格列配置                                     | TableTitle[] \| null                                          | -                        | null |
-| relevancyTable | 关联表格（与tableTitle属性互斥，同时存在时只有tableTitle生效） | InstanceType<typeof import('packages/MTable').MTable> \| null | -                        | null |
-
-#### 2) Events
-
-| 方法名              | 说明     | 回调参数                            |
-|------------------|--------|---------------------------------|
-| update:tableData | 表格数据更新 | \[data:  Record<string, any>[]] |
-
-
-
-
-表格列组件
-=================
-
-### 1) 基础用法
-
-
-
-```html
-
-<template>
-  <div class="g-box">
-    <el-table :data="tableData">
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :minWidth="item.minWidth"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-        :children="item.children || []"
-      >
-      </MTableColumn>
-    </el-table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-interface FilterValue {
-  [key: string]: Array<string | number>
-}
-const filtersValue = ref<FilterValue>({})
-interface User {
-  date: string;
-  name: string;
-  address: string;
-  tag: string;
+const filtersValue = ref<FilterValue>({})
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
 }
 const tableData = ref<User[]>([
   {
@@ -3942,357 +3614,29 @@ const options: Option[] = [{
 
 <template>
   <div class="g-box">
-    <h3>普通表格</h3>
-    <MTable
-      :data="tableData1"
-      border
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      @selectionChange="handleSelectionChange"
-    >
-      <el-table-column
-        fixed="left"
-        type="selection"
-      />
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      ></MTableColumn>
-    </MTable>
+    <!--<DemoTest1></DemoTest1>-->
+    <!--<el-divider />-->
 
-    <h3>展开列</h3>
-    <p @click="zzzz">{{ tableConfig }}</p>
-    <MTable
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      rowKey="id"
-      tableConfigKey="tableConfigKey"
-      expandProp="sn"
-      @privateExpandChange="privateExpandChange"
-    >
-      <el-table-column
-        fixed="left"
-        type="selection"
-      />
-      <MTableColumn
-        type="expand"
-        width="1"
-      >
-        <template #default="props">
-          <h1>index{{ props.index }}</h1>
-          <h1>$index{{ props.$index }}</h1>
-          <h1>测试</h1>
-        </template>
-      </MTableColumn>
-      <el-table-column
-        prop="name"
-        label="名称"
-      >
-        <el-table-column
-          prop="date"
-          label="时间"
-        ></el-table-column>
-        <el-table-column
-          prop="address"
-          label="地址"
-        ></el-table-column>
-      </el-table-column>
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      >
-      </MTableColumn>
-    </MTable>
+    <!--<DemoTest2></DemoTest2>-->
+    <!--<el-divider />-->
 
-    <h3>树状表格</h3>
-    <MTable
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      rowKey="id"
-      tableConfigKey="tableConfigKey"
-      @expandChange="privateExpandChange"
-    >
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      >
-      </MTableColumn>
-    </MTable>
+    <!--<DemoTest3></DemoTest3>-->
+    <!--<el-divider />-->
 
-    <h3>批改</h3>
-    <MBatchEdit
-      size="small"
-      v-model:tableData="tableData1"
-      :selectionCell="selectionCell"
-      :relevancyTable="mTableRef"
-    ></MBatchEdit>
-    <MTable
-      ref="mTableRef"
-      :data="tableData1"
-      border
-      scrollbarAlwaysOn
-      showSelectionCellStatus
-      v-model:selectionCell="selectionCell"
-    >
-      <MTableColumn
-        v-for="item in tableTitle"
-        :key="item.prop"
-        :prop="item.prop"
-        :label="item.label"
-        :align="item.align"
-        :minWidth="item.minWidth"
-        :className="item.className"
-        :filters="item.filters"
-        :headerAlign="item.headerAlign"
-        :fixed="item.fixed"
-        :isBatchEdit="item.isBatchEdit"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      ></MTableColumn>
-      <MTableColumn
-        prop="prop"
-        label="label"
-        showOverflowTooltip
-      ></MTableColumn>
-    </MTable>
-    <p>选中的单元格：{{ selectionCell }}</p>
+    <!--<DemoTest4></DemoTest4>-->
+    <!--<el-divider />-->
+
+    <DemoTest5></DemoTest5>
+    <el-divider />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useTableConfig } from './../../index'
-import { MTableColumn } from './../../MTableColumn'
-import MBatchEdit from './../src/MBatchEdit.vue'
-
-const privateExpandChange = (row: any, expandedRows: any[]) => {
-  console.log('row', row)
-  console.log('expandedRows', expandedRows)
-}
-
-const tableData = ref<any[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
-  label: '序号',
-  prop: 'sn',
-  minWidth: 200,
-  fixed: 'left',
-  isBatchEdit: false
-}, {
-  label: '时间',
-  prop: 'date',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '地址',
-  prop: 'address',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '名称',
-  prop: 'name',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '数量',
-  prop: 'qty',
-  minWidth: 200,
-  isBatchEdit: true
-}], tableData)
-
-// const childTableTitle: TableTitle[] = [{
-//   label: '序号',
-//   prop: 'sn',
-//   minWidth: 200,
-//   fixed: 'left'
-// }, {
-//   label: '时间',
-//   prop: 'date',
-//   minWidth: 200
-// }, {
-//   label: '地址',
-//   prop: 'address',
-//   minWidth: 200
-// }, {
-//   label: '名称',
-//   prop: 'name',
-//   minWidth: 200
-// }]
-const zzzz = () => {
-  filtersValue.value = {}
-}
-tableData.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0
-}, {
-  id: 2,
-  sn: 2,
-  date: '2016-05-02',
-  name: 'Tom2',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  children: [{
-    id: 21,
-    sn: 1,
-    date: '2016-05-02',
-    name: 'Tom21',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }, {
-    id: 22,
-    sn: 2,
-    date: '2016-05-02',
-    name: 'Tom22',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }]
-}, {
-  id: 3,
-  sn: 3,
-  date: '2016-05-04',
-  name: 'Tom3',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0
-}, {
-  id: 4,
-  sn: 4,
-  date: '2016-05-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}, {
-  id: 5,
-  sn: 5,
-  date: '2016-05-05',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}, {
-  id: 6,
-  sn: 6,
-  date: '2016-06-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0
-}]
-
-const tableData1 = ref<any[]>([])
-tableData1.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 10
-}, {
-  id: 2,
-  sn: 2,
-  date: '2016-05-02',
-  name: 'Tom2',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 101
-}, {
-  id: 3,
-  sn: 3,
-  date: '2016-05-04',
-  name: 'Tom3',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 102
-}, {
-  id: 4,
-  sn: 4,
-  date: '2016-05-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 103
-}, {
-  id: 5,
-  sn: 5,
-  date: '2016-05-05',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 104
-}, {
-  id: 6,
-  sn: 6,
-  date: '2016-06-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 105
-}]
-
-// 选中项
-const multipleSelection = ref<number[]>([])
-const handleSelectionChange = (val: any[]) => {
-  multipleSelection.value = val.map(item => item.sn)
-  tableData1.value[0].name = tableData1.value[0].name + 'd'
-}
-
-/**
- * 批量修改
- * */
-const selectionCell = ref<string>('')
-const mTableRef = ref<any | null>(null)
+// import DemoTest1 from 'packages/MTable/docs/DemoTest1.vue'
+// import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
+// import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
+// import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
+import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
 </script>
 
 <style lang="scss" scoped>