Table DragSort Column 列拖拽排序 (#755)

* docs(notification): 插件调用与函数式调用

* fix(table): merged cells border style

* fix(table): pagination

* fix(table): add default width for table-layout: auto

* fix(table): support ellipsis for safari browser

* fix(table): add rowKey validate

* fix(table): improve ellipsis

* feat(table): toggleExpandData

* fix(table): rowValue could be 0

* docs(table): update documents

* fix(table): dragSort rowKey

* fix(table): 去掉非必要的 col width

* fix(table): selectedRowKeys

* feat: update common & update docs

* fix(table): rowClass

* docs: deprecated map-props

* refactor(table): code improve

* feat(table): add event params

* refactor(table): drag-sort

* feat(table): remove dragSort=drag-col

* feat(table): 全局配置

* docs(config-provider): 添加全局配置示例

* feat(config-provider): update docs

* feat(table): 无内置按钮场景下的列配置

* fix(table): rowClassName

* refactor(table): 整理懒加载代码

* feat: update common

* feat: update common

* feat(table): some little things

* feat(table): some features

* chore: some little thing

* feat(table): column drag sort

* fix(table): affixed header

* test(table): fix test error

* feat: update common

Co-authored-by: sheepluo <[email protected]>

examples/swiper/demos/current.vue

@@ -21,11 +21,8 @@
       </t-swiper-item>
     </t-swiper>
     <div class="tdesign-demo-block-row">
-      <t-button
-        size="small"
-        @click="current = current + 2 > 6 ? 0 : current + 1"
-      >
-        跳转到第 {{current + 2 >= 7 ? 1 : current + 2}} 项
+      <t-button size="small" @click="current = current + 2 > 6 ? 0 : current + 1">
+        跳转到第 {{ current + 2 >= 7 ? 1 : current + 2 }} 项
       </t-button>
     </div>
   </div>

examples/table/demos/drag-col-sort.vue

@@ -1,40 +1,31 @@
 <template>
   <div class="demo-container t-table-demo-sort">
     <div class="item">
-      <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
-
       <t-table rowKey="id" :columns="columns" :data="data" dragSort="col" @drag-sort="onDragSort">
         <template #status="{ row }">
-          <p class="status" :class="['', 'warning', 'unhealth'][row.status]">
-            {{ ['健康', '警告', '异常'][row.status] }}
+          <p class="status" :class="['', 'warning', 'unhealth'][row && row.status]">
+            {{ ['健康', '警告', '异常'][row && row.status] }}
           </p>
         </template>
       </t-table>
     </div>
   </div>
 </template>
 
-<script lang="jsx">
-import { MoveIcon } from 'tdesign-icons-vue';
-
-const columns = [
-  {
-    colKey: 'drag', // 列拖拽排序必要参数
-    title: '排序',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    cell: (h) => <MoveIcon />,
-    width: 80,
-  },
-  { colKey: 'instance', title: '集群名称' },
+<script>
+const initialColumns = [
+  { colKey: 'instance', title: '集群名称', width: 150 },
   {
     colKey: 'status',
     title: '状态',
+    width: 100,
   },
   {
     colKey: 'survivalTime',
     title: '存活时间(s)',
+    width: 200,
   },
-  { colKey: 'owner', title: '管理员' },
+  { colKey: 'owner', title: '管理员', width: 100 },
 ];
 
 const initialData = new Array(4).fill(5).map((_, i) => ({
@@ -49,15 +40,17 @@ export default {
   data() {
     return {
       data: [...initialData],
-      columns,
+      columns: [...initialColumns],
     };
   },
   methods: {
     onDragSort({
-      currentIndex, current, targetIndex, target, currentData, e,
+      currentIndex, current, targetIndex, target, currentData, e, sort,
     }) {
-      console.log('交换行', currentIndex, current, targetIndex, target, currentData, e);
-      this.data = currentData;
+      console.log('重新排序', currentIndex, current, targetIndex, target, currentData, e, sort);
+      if (sort === 'col') {
+        this.columns = currentData;
+      }
     },
   },
 };

examples/table/demos/drag-sort-handler.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="demo-container t-table-demo-sort">
+    <div class="item">
+      <!-- 拖拽排序涉及到 data 的变更，相对比较慎重，因此仅支持受控用法 -->
+
+      <t-table rowKey="id" :columns="columns" :data="data" dragSort="row-handler" @drag-sort="onDragSort">
+        <template #status="{ row }">
+          <p class="status" :class="['', 'warning', 'unhealth'][row.status]">
+            {{ ['健康', '警告', '异常'][row.status] }}
+          </p>
+        </template>
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script lang="jsx">
+import { MoveIcon } from 'tdesign-icons-vue';
+
+const columns = [
+  {
+    colKey: 'drag', // 列拖拽排序必要参数
+    title: '排序',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    cell: (h) => <MoveIcon />,
+    width: 80,
+  },
+  { colKey: 'instance', title: '集群名称' },
+  {
+    colKey: 'status',
+    title: '状态',
+  },
+  {
+    colKey: 'survivalTime',
+    title: '存活时间(s)',
+  },
+  { colKey: 'owner', title: '管理员' },
+];
+
+const initialData = new Array(4).fill(5).map((_, i) => ({
+  id: i + 1,
+  instance: `JQTest${i + 1}`,
+  status: [0, 1, 2, 1][i % 4],
+  owner: ['jenny;peter', 'jenny', 'jenny', 'peter'][i % 4],
+  survivalTime: [1000, 1000, 500, 1500][i % 4],
+}));
+
+export default {
+  data() {
+    return {
+      data: [...initialData],
+      columns,
+    };
+  },
+  methods: {
+    onDragSort({
+      currentIndex, current, targetIndex, target, currentData, e,
+    }) {
+      console.log('交换行', currentIndex, current, targetIndex, target, currentData, e);
+      this.data = currentData;
+    },
+  },
+};
+</script>

examples/table/demos/expandable.vue

@@ -17,7 +17,7 @@
 
     <div>
       <t-checkbox v-model="expandOnRowClick">允许点击行之后展开/收起</t-checkbox>
-      <t-checkbox v-model="fixedColums" style="margin-left: 32px">固定列</t-checkbox>
+      <t-checkbox v-model="fixedColumns" style="margin-left: 32px">固定列</t-checkbox>
       <t-checkbox v-model="emptyData" style="margin-left: 32px">空数据</t-checkbox>
     </div>
 
@@ -61,7 +61,7 @@
 <script lang="jsx">
 import { ChevronRightIcon, ChevronRightCircleIcon } from 'tdesign-icons-vue';
 
-const getColums = (isFixedColumn) => [
+const getColumns = (isFixedColumn) => [
   { colKey: 'instance', title: '集群名称', fixed: isFixedColumn ? 'left' : '' },
   {
     colKey: 'status',
@@ -104,7 +104,7 @@ export default {
       expandControl: 'true',
       expandIcon: true,
       expandOnRowClick: true,
-      fixedColums: false,
+      fixedColumns: false,
       emptyData: false,
       data,
       // 有哪些 data.id 在 expandedRowKeys 中，就显示这些 id 对应的行
@@ -137,7 +137,7 @@ export default {
   },
   computed: {
     columns() {
-      return getColums(this.fixedColums);
+      return getColumns(this.fixedColumns);
     },
   },
   watch: {

examples/table/demos/multi-header.vue

@@ -7,14 +7,15 @@
       <!-- 只要有 maxHeight，就有固定表头，无论该值是否存在 -->
       <t-checkbox v-model="fixedHeader">显示固定表头</t-checkbox>
       <!-- 为保证组件收益最大化，当数据量小于 `100` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 -->
-      <t-checkbox v-model="virtualScroll">虚拟滚动</t-checkbox>
+      <!-- <t-checkbox v-model="virtualScroll">虚拟滚动</t-checkbox> -->
       <t-checkbox v-model="fixedLeftCol">固定左侧列</t-checkbox>
       <t-checkbox v-model="fixedRightCol">固定右侧列</t-checkbox>
       <t-checkbox v-model="headerAffixedTop">表头吸顶</t-checkbox>
     </div>
 
     <!-- tableContentWidth 必须大于表格的外层宽度，否则请设置 width: 100% -->
     <!-- 多级表头中，如果要使用固定列功能，则必须设置 colKey 和 fixed -->
+    <!-- :scroll="{ type: 'virtual' }" -->
     <t-table
       row-key="index"
       :data="data"
@@ -26,15 +27,15 @@
       :filterRow="() => null"
       :headerAffixProps="{ offsetTop: 0 }"
       :headerAffixedTop="headerAffixedTop"
-      :scroll="virtualScroll ? { type: 'virtual', threshold: 2, rowHeight: 48, bufferSize: 10 } : undefined"
+      :scroll="{ type: 'virtual' }"
       @data-change="onDataChange"
       @filter-change="onFilterChange"
     ></t-table>
   </div>
 </template>
 <script>
 const data = [];
-for (let i = 0; i < 600; i++) {
+for (let i = 0; i < 1000; i++) {
   data.push({
     index: i,
     platform: i % 2 === 0 ? '共有' : '私有',

examples/table/demos/tree-select.vue

@@ -87,6 +87,7 @@ export default {
           // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
           // 这种方式禁用行选中，行文本不会变灰
           checkProps: ({ row }) => ({ disabled: row.status !== 0 }),
+          // 自由调整宽度，如果发现元素看不见，请加大宽度
           width: 20,
         },
         {