br-dionysus 1.8.4 → 1.8.6

package/README.md

@@ -22,12 +22,16 @@
 
 + MTableColumnSet([表格头设置组件](#表格头设置组件))
 
++ MTableSuper([整合表格组件](#整合表格组件))
+
 + MTableV2([虚拟化表格](#虚拟化表格))
 
 + SkinConfig([皮肤设置](#皮肤设置))
 
 + TabPage([标签页组件](#标签页组件))
 
++ useFormInline([筛选项配置化-hook](#筛选项配置化-hook))
+
 + usePackageConfig([配置保存与获取-hook](#配置保存与获取-hook))
 
 + useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
@@ -308,38 +312,38 @@ const open3 = () => {
             </el-input>
           </el-form-item>
           <el-form-item
-            label="编码"
-            prop="code"
+            label="类型"
+            prop="type"
             data-item
           >
             <el-input
-              v-model="formInline.code"
+              v-model="formInline.type"
               clearable
-              placeholder="请输入编码"
+              placeholder="请输入类型"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="角色名"
-            prop="name"
+            label="地区"
+            prop="region"
             data-item
           >
             <el-input
-              v-model="formInline.name"
+              v-model="formInline.region"
               clearable
-              placeholder="请输入角色名"
+              placeholder="请输入地区"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="时间"
-            prop="time"
+            label="等级"
+            prop="level"
             data-item
           >
             <el-input
-              v-model="formInline.time"
+              v-model="formInline.level"
               clearable
-              placeholder="请输入时间"
+              placeholder="请输入等级"
             >
             </el-input>
           </el-form-item>
@@ -365,7 +369,10 @@ import { reactive } from 'vue'
 const formInline = reactive({
   name: '',
   code: '',
-  time: ''
+  time: '',
+  type: '',
+  region: '',
+  level: ''
 })
 </script>
 
@@ -380,15 +387,16 @@ const formInline = reactive({
 
 ### 2) Attributes
 
-| 参数       |  说明   |   类型   |            可选值            |   默认值   |
-|----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth | 列最小宽度 | number |             -             |   200   |
-| maxWidth | 列最大宽度 | number |             -             |   300   |
-| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+| 参数        |  说明   |   类型   |            可选值            |   默认值   |
+|-----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 | number |             -             |   200   |
+| maxWidth  | 列最大宽度 | number |             -             |   300   |
+| size      | 组件尺寸  |  enum  | large \| default \| small | default |
+| configKey | 配置key | string |             -             |    -    |
 
 ### 2) Events
 
-| 方法名    |           说明           |       参数        |
+| 事件名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
 
@@ -405,14 +413,54 @@ const formInline = reactive({
 
 <template>
   <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
+    <m-input-number
+      v-model="test"
+      @input="numberInput"
+      @change="numberChange"
+    ></m-input-number>
+    <h5>对比组</h5>
+    <el-input-number
+      v-model="test2"
+      @input="numberInput2"
+      @change="numberChange2"
+    ></el-input-number>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const test = ref<number>(0)
+const numberInput = (val: number) => {
+  console.log('m1', val)
+  console.log('m2', test.value)
+}
+const numberChange = (val: number) => {
+  console.log('m3', val)
+  console.log('m4', test.value)
+}
+watch(
+  () => test.value,
+  () => {
+    console.log('m5', test.value)
+  }
+)
+
+const test2 = ref<number>(0)
+const numberInput2 = (val: number) => {
+  console.log('e1', val)
+  console.log('e2', test2.value)
+}
+const numberChange2 = (val: number) => {
+  console.log('e3', val)
+  console.log('e4', test2.value)
+}
+watch(
+  () => test2.value,
+  () => {
+    console.log('e5', test2.value)
+  }
+)
 </script>
 
 <style scoped>
@@ -1490,7 +1538,7 @@ const tableConfig = ref({
 
 
 
-虚拟化表格
+整合表格组件
 =================
 
 ### 1) 基础用法
@@ -1501,55 +1549,242 @@ const tableConfig = ref({
 
 <template>
   <div class="g-box">
-    <p @click="test">{{ tableConfig }}</p>
-    <MTableV2
+    <h3>基础功能</h3>
+    <MTableSuper
       :data="tableData"
-      :columns="tableTitle"
-      :height="500"
+      v-if="!tableData"
       border
-      fixed
+    >
+      <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>
+    </MTableSuper>
+    <h3>带选择的表格</h3>
+    <MTableSuper
+      :data="tableData"
+      border
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <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>
+    </MTableSuper>
+    <h3>展开列</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
       v-model:tableConfig="tableConfig"
-      tableConfigKey="MTableV2Demo"
-    ></MTableV2>
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @headerDragend="headerDragend"
+      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>
+      <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>
+    </MTableSuper>
+    <h3>树状表格</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :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>
+    </MTableSuper>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+import { useTableConfig } from 'packages/index'
+import { MTableColumn } from 'packages/MTableColumn'
+
+const privateExpandChange = (row: any, expandedRows: any[]) => {
+  console.log('row', row)
+  console.log('expandedRows', expandedRows)
+}
+
+// const test = (data: any) => {
+//   console.log('data', data)
+// }
 
 const tableData = ref<any[]>([])
-const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
-  title: '序号',
-  key: 'sn',
-  dataKey: 'sn',
-  width: 300
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200
+  // fixed: 'right'
 }, {
-  title: '时间',
-  key: 'date',
-  dataKey: 'date',
-  width: 300
+  label: '时间',
+  prop: 'date',
+  minWidth: 200
+  // fixed: 'left'
 }, {
-  title: '地址',
-  key: 'address',
-  dataKey: 'address',
-  width: 300
+  label: '地址',
+  prop: 'address',
+  minWidth: 200
 }, {
-  title: '名称',
-  key: 'name',
-  dataKey: 'name',
-  width: 300
+  label: '名称',
+  prop: 'name',
+  minWidth: 200
 }], tableData)
+console.log('tableTitle', tableTitle.value)
 
-const test = () => {
-  filtersValue.value = {}
-}
 tableData.value = [{
   id: 1,
-  sn: 'sn',
-  date: 'date',
-  address: 'address',
-  name: 'name'
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189',
+  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',
+  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
 }]
 </script>
 
@@ -1564,17 +1799,131 @@ tableData.value = [{
 
 ### 2) Attributes
 
-| 参数                 | 说明                                                | 类型                         | 可选值                       | 默认值                                                                               |
-|--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------|
-| size               | 尺寸                                                | string                     | small \| large \| default | default                                                                           |
-| data               | 要在表中渲染的数据数组                                       | any[]                      | -                         | []                                                                                |
-| columns            | 表格列配置                                             | TableV2Title[]             | -                         | []                                                                                |
-| filtersValue       | 表格内容筛选(当为null时，不显示筛选图标)                           | FilterValue \| null        | -                         | null                                                                              |
+| 参数             | 说明                          | 类型               | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Array            | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number  | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string           | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | 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[]]                     |
+| 其余方法                | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+
+
+
+
+
+虚拟化表格
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-box">
+    <p @click="test">{{ tableConfig }}</p>
+    <MTableV2
+      :data="tableData"
+      :columns="tableTitle"
+      :height="500"
+      border
+      fixed
+      v-model:tableConfig="tableConfig"
+      tableConfigKey="MTableV2Demo"
+    ></MTableV2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+
+const tableData = ref<any[]>([])
+const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
+  title: '序号',
+  key: 'sn',
+  dataKey: 'sn',
+  width: 300
+}, {
+  title: '时间',
+  key: 'date',
+  dataKey: 'date',
+  width: 300
+}, {
+  title: '地址',
+  key: 'address',
+  dataKey: 'address',
+  width: 300
+}, {
+  title: '名称',
+  key: 'name',
+  dataKey: 'name',
+  width: 300
+}], tableData)
+
+const test = () => {
+  filtersValue.value = {}
+}
+for (let i = 0; i < 1000; i++) {
+  tableData.value.push({
+    id: i,
+    sn: 'sn' + i,
+    date: 'date' + i,
+    address: 'address' + i,
+    name: 'name' + i
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                 | 说明                                                | 类型                         | 可选值                       | 默认值                                                                               |
+|--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------|
+| size               | 尺寸                                                | string                     | small \| large \| default | default                                                                           |
+| data               | 要在表中渲染的数据数组                                       | any[]                      | -                         | []                                                                                |
+| columns            | 表格列配置                                             | TableV2Title[]             | -                         | []                                                                                |
+| filtersValue       | 表格内容筛选(当为null时，不显示筛选图标)                           | FilterValue \| null        | -                         | null                                                                              |
 | tableConfig        | 表格配置                                              | TableConfig \| null        | -                         | null                                                                              |
 | tableConfigKey     | 表格配置key                                           | string                     | -                         | ''                                                                                |
 | fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
 | estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
 | headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| cellWidthAdaptive  | 单元格宽度自适应                                          | boolean                    | -                         | false                                                                             |
 | 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
 
 ### 3) Events
@@ -2343,6 +2692,8 @@ const list = ref<{ name: string, className: string }[]>([
 
 ## Hook列表
 
++ useFormInline([筛选项配置化-hook](#筛选项配置化-hook))
+
 + usePackageConfig([配置保存与获取-hook](#配置保存与获取-hook))
 
 + useRemainingSpace([计算获取剩余空间-hook](#计算获取剩余空间-hook))
@@ -2356,6 +2707,51 @@ const list = ref<{ name: string, className: string }[]>([
 
 
 
+筛选项配置化 hook
+=================
+
+### 1) 基础用法
+
+
+
+### 2) 所需参数
+
+| 名称        | 描述            | 类型                              | 可选值 | 默认值  |
+|-----------|---------------|---------------------------------|:---:|:----:|
+| configKey | 当前配置标识，即唯一key | string                          |  -  |  ''  |
+| data      | 筛选条件关联key map | <T extends Record<string, any>> |  -  |  -   |
+| isConfig  | 是否开启配置        | boolean                         |  -  | true |
+
+### 2) 返回值
+
+| 名称 | 描述  | 类型                                 |
+|----|-----|------------------------------------|
+| -  | 返回值 | UseFormInlineReturnType<T> \| void |
+
+#### 2.1) UseFormInlineReturnType
+
+| 名称              | 描述            | 类型         |
+|-----------------|---------------|------------|
+| \[K in keyof T] | 筛选条件关联key map | T\[K]      |
+| reset           | 重置方法          | () => void |
+
+### 3) 配置结构 FormInlineConfigType<T>
+
+| 名称           | 描述   | 类型      |
+|--------------|------|---------|
+| sort         | 排序   | number  |
+| defaultValue | 默认值  | any     |
+| show         | 是否显示 | boolean |
+
+
+
+
+
+
+
+
+
+
 配置保存与获取 hook
 =================
 
@@ -2552,6 +2948,8 @@ const list = ref<{ name: string, className: string }[]>([
 + createHash([](#))
 
 + moneyFormat([](#))
+
++ slotsToData([](#))
 
 
 对话框
@@ -2823,38 +3221,38 @@ const open3 = () => {
             </el-input>
           </el-form-item>
           <el-form-item
-            label="编码"
-            prop="code"
+            label="类型"
+            prop="type"
             data-item
           >
             <el-input
-              v-model="formInline.code"
+              v-model="formInline.type"
               clearable
-              placeholder="请输入编码"
+              placeholder="请输入类型"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="角色名"
-            prop="name"
+            label="地区"
+            prop="region"
             data-item
           >
             <el-input
-              v-model="formInline.name"
+              v-model="formInline.region"
               clearable
-              placeholder="请输入角色名"
+              placeholder="请输入地区"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="时间"
-            prop="time"
+            label="等级"
+            prop="level"
             data-item
           >
             <el-input
-              v-model="formInline.time"
+              v-model="formInline.level"
               clearable
-              placeholder="请输入时间"
+              placeholder="请输入等级"
             >
             </el-input>
           </el-form-item>
@@ -2880,7 +3278,10 @@ import { reactive } from 'vue'
 const formInline = reactive({
   name: '',
   code: '',
-  time: ''
+  time: '',
+  type: '',
+  region: '',
+  level: ''
 })
 </script>
 
@@ -2895,15 +3296,16 @@ const formInline = reactive({
 
 ### 2) Attributes
 
-| 参数       |  说明   |   类型   |            可选值            |   默认值   |
-|----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth | 列最小宽度 | number |             -             |   200   |
-| maxWidth | 列最大宽度 | number |             -             |   300   |
-| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+| 参数        |  说明   |   类型   |            可选值            |   默认值   |
+|-----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 | number |             -             |   200   |
+| maxWidth  | 列最大宽度 | number |             -             |   300   |
+| size      | 组件尺寸  |  enum  | large \| default \| small | default |
+| configKey | 配置key | string |             -             |    -    |
 
 ### 2) Events
 
-| 方法名    |           说明           |       参数        |
+| 事件名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |
 
@@ -2920,14 +3322,54 @@ const formInline = reactive({
 
 <template>
   <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
+    <m-input-number
+      v-model="test"
+      @input="numberInput"
+      @change="numberChange"
+    ></m-input-number>
+    <h5>对比组</h5>
+    <el-input-number
+      v-model="test2"
+      @input="numberInput2"
+      @change="numberChange2"
+    ></el-input-number>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const test = ref<number>(0)
+const numberInput = (val: number) => {
+  console.log('m1', val)
+  console.log('m2', test.value)
+}
+const numberChange = (val: number) => {
+  console.log('m3', val)
+  console.log('m4', test.value)
+}
+watch(
+  () => test.value,
+  () => {
+    console.log('m5', test.value)
+  }
+)
+
+const test2 = ref<number>(0)
+const numberInput2 = (val: number) => {
+  console.log('e1', val)
+  console.log('e2', test2.value)
+}
+const numberChange2 = (val: number) => {
+  console.log('e3', val)
+  console.log('e4', test2.value)
+}
+watch(
+  () => test2.value,
+  () => {
+    console.log('e5', test2.value)
+  }
+)
 </script>
 
 <style scoped>
@@ -4005,6 +4447,304 @@ const tableConfig = ref({
 
 
 
+整合表格组件
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-box">
+    <h3>基础功能</h3>
+    <MTableSuper
+      :data="tableData"
+      v-if="!tableData"
+      border
+    >
+      <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>
+    </MTableSuper>
+    <h3>带选择的表格</h3>
+    <MTableSuper
+      :data="tableData"
+      border
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <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>
+    </MTableSuper>
+    <h3>展开列</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @headerDragend="headerDragend"
+      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>
+      <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>
+    </MTableSuper>
+    <h3>树状表格</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :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>
+    </MTableSuper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTableConfig } from 'packages/index'
+import { MTableColumn } from 'packages/MTableColumn'
+
+const privateExpandChange = (row: any, expandedRows: any[]) => {
+  console.log('row', row)
+  console.log('expandedRows', expandedRows)
+}
+
+// const test = (data: any) => {
+//   console.log('data', data)
+// }
+
+const tableData = ref<any[]>([])
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200
+  // fixed: 'right'
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200
+  // fixed: 'left'
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200
+}], tableData)
+console.log('tableTitle', tableTitle.value)
+
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189',
+  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',
+  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
+}]
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数             | 说明                          | 类型               | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Array            | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number  | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string           | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | 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[]]                     |
+| 其余方法                | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+
+
+
+
+
 虚拟化表格
 =================
 
@@ -4059,13 +4799,15 @@ const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo
 const test = () => {
   filtersValue.value = {}
 }
-tableData.value = [{
-  id: 1,
-  sn: 'sn',
-  date: 'date',
-  address: 'address',
-  name: 'name'
-}]
+for (let i = 0; i < 1000; i++) {
+  tableData.value.push({
+    id: i,
+    sn: 'sn' + i,
+    date: 'date' + i,
+    address: 'address' + i,
+    name: 'name' + i
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -4090,6 +4832,7 @@ tableData.value = [{
 | fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
 | estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
 | headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| cellWidthAdaptive  | 单元格宽度自适应                                          | boolean                    | -                         | false                                                                             |
 | 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
 
 ### 3) Events
@@ -4929,3 +5672,33 @@ const list = ref<{ name: string, className: string }[]>([
 | repairZero  | 末尾补到几位零 | number | -   |
 
 
+
+
+## vue3的slots转json
+
+### 1) 参数
+
+| 参数    | 描述          | 类型     | 默认值       |
+|-------|-------------|--------|-----------|
+| slots | vue的slots对象 | Slots  | -         |
+| name  | 插槽名         | string | 'default' |
+
+### 2) 返参
+
+| 参数 | 描述           | 类型                | 默认值 |
+|----|--------------|-------------------|-----|
+| -  | 格式化后的slots数据 | SlotsToDataReturn | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数                | 描述           | 类型                      | 默认值 |
+|-------------------|--------------|-------------------------|-----|
+| SlotsToDataReturn | 格式化后的slots数据 | SlotsToDataReturnItem[] | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数       | 描述            | 类型                          | 默认值 |
+|----------|---------------|-----------------------------|-----|
+| name     | 标签名           | string                      | -   |
+| props    | 组件标签上的props参数 | Record<string, any> \| null | -   |
+| children | 子级            | SlotsToDataReturnItem[]     | -   |
+
+