refactor(table): 优化表格组件数据处理逻辑

- 调整 CuteDragTable 组件中分页器的位置，将其移至表格外部 - 简化数据获取流程，将 response 变量改为 transformData 并优化数据转换逻辑 - 移除不必要的返回语句和注释代码 - 修复 CuteDragTableDemo 中表单参数传递问题，直接使用 this.form 而非 this.form.model - 从 CuteSimpleTableDemo 中移除硬编码的列配置数组
2026-02-06 14:55:31 +08:00
parent cebceeac1a
commit 56046c6b6e
10 changed files with 472 additions and 37 deletions
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <h4>何时使用</h4>
+    <ul class="description">
+      <li>展示结构化数据列表，并支持排序、分页、拖拽排序</li>
+      <li>在使用过程中有任何问题，咨询 @Odboy（前端）</li>
+    </ul>
+    <h4>基础用法</h4>
+    <!-- 表格渲染 -->
+    <!-- fetch: 获取远程数据 -->
+    <!-- params-transform: 组装查询参数 -->
+    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
+    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
+    <!-- @selection-change: 当且仅当mode为multi时启用 -->
+    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
+    <cute-dynamic-table
+      ref="instance"
+      :fetch="curd.fetch"
+      :params-transform="curd.paramsTransform"
+      :page-props="curd.pageProps"
+      show-select
+    >
+      <template v-slot:batchArea>
+        <cute-button type="primary">批量绑定</cute-button>
+      </template>
+      <template v-slot:toolArea>
+        <cute-button type="primary">导出</cute-button>
+      </template>
+      <template v-slot:operation>
+        <el-table-column label="操作" width="150" min-width="150" fixed="right">
+          <template v-slot="scope">
+            <div>
+              <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
+              <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </template>
+    </cute-dynamic-table>
+    <h4>API</h4>
+    <el-table :data="apiData">
+      <el-table-column prop="name" label="参数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="type" label="类型" />
+      <el-table-column prop="defaultValue" label="默认值" />
+      <el-table-column prop="required" label="是否必填" />
+    </el-table>
+    <h4>方法</h4>
+    <el-table :data="methodData">
+      <el-table-column prop="name" label="函数" width="220" />
+      <el-table-column prop="remark" label="说明" width="450" />
+      <el-table-column prop="inputArgs" label="入参" />
+      <el-table-column prop="outArgs" label="出参" />
+    </el-table>
+  </div>
+</template>
+<script>
+import FeatureCuteDynamicTableService from '@/api/features/cute-dynamic-table'
+import CuteButton from '@/views/components/dev/CuteButton.vue'
+import { FormatRowDateTimeStr } from '@/utils/KitUtil'
+import CuteDynamicTable from '@/views/components/advanced/CuteDynamicTable.vue'
+
+export default {
+  name: 'CuteDynamicTableDemo',
+  components: { CuteDynamicTable, CuteButton },
+  data() {
+    return {
+      form: {
+        blurry: ''
+      },
+      curd: {
+        paramsTransform: (pageProps) => {
+          const values = this.form
+          return {
+            page: pageProps.current,
+            size: pageProps.pageSize,
+            args: {
+              ...values
+            }
+          }
+        },
+        fetch: async(queryParams) => {
+          return FeatureCuteDynamicTableService.searchMenu(queryParams)
+        },
+        columns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'description', label: '描述' },
+          { prop: 'createTime', label: '创建时间', formatter: FormatRowDateTimeStr },
+          { prop: 'createBy', label: '创建人' }
+        ],
+        pageProps: {
+          current: 1,
+          pageSize: 10,
+          total: 0
+        }
+      },
+      apiData: [
+        { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
+        { name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
+        { name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
+        { name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
+        { name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
+        { name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
+        { name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
+        { name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
+        { name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
+        { name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
+        { name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
+      ],
+      methodData: [
+        { name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
+        { name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
+      ]
+    }
+  },
+  mounted() {
+    this.refreshData()
+  },
+  methods: {
+    FormatRowDateTimeStr,
+    refreshData() {
+      this.$refs.instance.refresh()
+    },
+    onTableEditClick(row) {
+      console.log('编辑', row)
+    },
+    onTableDeleteClick(row) {
+      console.log('删除', row)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+ul {
+  padding-left: 20px;
+}
+.description > li{
+  font-size: 12px;
+}
+</style>