表格优化

src/components/table/column/index.vue

@@ -1,7 +1,8 @@
-<script lang="ts">
+<script lang='ts'>
 import { defineComponent, createVNode, reactive } from 'vue'
-import { ElTableColumn } from 'element-plus'
+import { Column } from 'vxe-table'
 import { uuid } from '@/utils/random'
+
 export default defineComponent({
     name: 'Column',
     props: {
@@ -14,7 +15,7 @@ export default defineComponent({
         const attr = reactive(props.attr)
         attr['column-key'] = attr['column-key'] ? attr['column-key'] : attr.prop || uuid()
         return () => {
-            return createVNode(ElTableColumn, attr, slots.default)
+            return createVNode(Column, attr, slots.default)
         }
     }
 })

src/components/table/index.vue

@@ -1,21 +1,23 @@
 <template>
-    <el-table
+    <vxe-table
         ref="tableRef"
         class="ba-data-table w100"
         header-cell-class-name="table-header-cell"
         :data="tableStore.table.data"
-        :row-key="tableStore.pk"
         :border="true"
         v-loading="tableStore.table.loading"
         stripe
         @selection-change="onSelectionChange"
         v-bind="$attrs"
+        :column-config="{resizable: true}"
+        :tree-config="{}"
     >
         <!-- Column 组件内部是 el-table-column -->
         <Column
             :attr="item"
             :key="key + '-column'"
             v-for="(item, key) in tableStore.table.column"
+            :tree-node='item.treeNode'
         >
             <!-- tableStore 预设的列 render 方案 -->
             <template v-if="item.render" #default="scope">
@@ -23,20 +25,20 @@
                     :field="item"
                     :row="scope.row"
                     :column="scope.column"
-                    :index="scope.$index"
+                    :index="scope.rowIndex"
                     :key="
                         key +
                         '-' +
-                        scope.$index +
+                        scope.rowIndex +
                         '-' +
                         item.render +
                         '-' +
-                        (item.prop ? '-' + item.prop + '-' + scope.row[item.prop] : '')
+                        (item.field ? '-' + item.field + '-' + scope.row[item.field] : '')
                     "
                 />
             </template>
         </Column>
-    </el-table>
+    </vxe-table>
     <div v-if="props.pagination" class="table-pagination">
         <el-pagination
             :currentPage="tableStore.table.params!.pageNum"