👣 基于vben重构原生组件

kicc-ui/src/views/system/config/index.vue

@@ -149,7 +149,7 @@
   import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
   import { ref, onMounted, computed, watch } from 'vue';
   import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker, Alert } from 'ant-design-vue';
-  import { BasicTableProps, PaginationProps, SizeType } from '/@/components/Table';
+  import {BasicColumn, BasicTableProps, PaginationProps, SizeType} from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
   import { columns } from './config.data';
@@ -233,6 +233,8 @@
     tableProps: {
       // 表格ID
       rowKey: 'id',
+      // 表格列
+      columns,
       // 遮罩层
       loading: false,
       // 数据列表
@@ -248,6 +250,7 @@
   const defineBasicTableProps = defineProps(basicProps);
   const basicTableProps = computed(() => ({ ...toRaw(defineBasicTableProps), ...state.tableProps } as unknown as BasicTableProps));
   const dataSourceRef = computed(() => state.tableProps.dataSource);
+  const columnsRef = computed<BasicColumn[]>(() => state.tableProps.columns);
   // 基于vben-table扩展rowSelection,实现勾选数据自主可控
   const {
     getRowSelection,
@@ -269,12 +272,11 @@
   // 使用vben-table行斑马线
   const { getRowClassName } = useTableStyle(basicTableProps, prefixCls);
   // 使用vben-table自动计算表格高度跟在指定区域显示滚动条
-  const { getScrollRef, redoHeight } = useTableScroll(basicTableProps, tableElRef, columns as any, getRowSelectionRef, dataSourceRef);
+  const { getScrollRef, redoHeight } = useTableScroll(basicTableProps, tableElRef, columnsRef, getRowSelectionRef, dataSourceRef);
   // 设置并绑定a-table属性
   const getBindValues = computed(() => {
     const propsData: Recordable = {
       ...state.tableProps,
-      columns: columns,
       size: state.selectedKeys[0],
       scroll: unref(getScrollRef),
       rowClassName: unref(getRowClassName),