Refactor Table with Composition API and Some New Features

examples/table/demos/base.vue

@@ -38,11 +38,14 @@ for (let i = 0; i < 5; i++) {
 
 const columns = [
   {
-    align: 'center',
     width: '100',
-    className: 'row',
     colKey: 'index',
     title: '序号',
+    align: 'center',
+    className: 'custom-column-class-name',
+    attrs: {
+      'data-id': 'first-column',
+    },
   },
   {
     colKey: 'platform',

examples/table/demos/custom-col.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="tdesign-demo-block-column-large">
+    <!-- 按钮操作区域 -->
+    <!-- 设置哪些列允许自定义显示 :columnController="{ fields: ['platform', 'type', 'default']}" -->
+    <t-table
+      row-key="index"
+      :data="data"
+      :columns="columns"
+      :column-controller="{ displayType: 'fixed-width', fields: ['platform', 'type', 'default'] }"
+      table-layout="auto"
+      stripe
+      bordered
+      @column-change="onColumnChange"
+    ></t-table>
+  </div>
+</template>
+<script setup lang="jsx">
+const data = [];
+for (let i = 0; i < 5; i++) {
+  data.push({
+    index: i,
+    platform: i % 2 === 0 ? '共有' : '私有',
+    type: ['String', 'Number', 'Array', 'Object'][i % 4],
+    default: ['-', '0', '[]', '{}'][i % 4],
+    detail: {
+      postion: `读取 ${i} 个数据的嵌套信息值`,
+    },
+    needed: i % 4 === 0 ? '是' : '否',
+    description: '数据源',
+  });
+}
+
+const columns = [
+  {
+    align: 'center',
+    className: 'row',
+    colKey: 'index',
+    title: '序号',
+  },
+  {
+    colKey: 'platform',
+    title: '平台',
+  },
+  {
+    colKey: 'type',
+    title: '类型',
+  },
+  {
+    colKey: 'default',
+    title: '默认值',
+  },
+  {
+    colKey: 'needed',
+    title: '是否必传',
+  },
+  {
+    colKey: 'detail.postion',
+    title: '详情信息',
+    ellipsis: true,
+  },
+];
+
+const onColumnChange = (params) => {
+  console.log(params);
+};
+</script>

examples/table/demos/custom-footer.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="tdesign-demo-block-column-large">
+    <!-- rowClassName="tdesign-demo__row-custom-name" -->
+    <t-table row-key="index" :data="data" :columns="columns" :foot-data="footData" :row-class-name="rowClassName">
+      <template #t-foot-required> 插槽渲染表尾 </template>
+    </t-table>
+  </div>
+</template>
+<script setup lang="jsx">
+const data = [];
+for (let i = 0; i < 3; i++) {
+  data.push({
+    index: i,
+    platform: i % 2 === 0 ? '共有' : '私有',
+    type: ['String', 'Number', 'Array', 'Object'][i % 4],
+    default: ['-', '0', '[]', '{}'][i % 4],
+    detail: {
+      postion: `读取 ${i} 个数据的嵌套信息值`,
+    },
+    required: i % 4 === 0 ? '是' : '否',
+    description: '数据源',
+  });
+}
+
+// 表尾有一行数据
+const footData = [{}];
+
+const columns = [
+  {
+    align: 'center',
+    width: '100',
+    className: 'row',
+    colKey: 'index',
+    title: '序号',
+    foot: () => <b style="color: rgb(0, 82, 217)">表尾</b>,
+  },
+  {
+    width: 100,
+    colKey: 'platform',
+    title: '平台',
+    foot: (h, { rowIndex }) => <span>第 {rowIndex + 1} 行</span>,
+  },
+  {
+    colKey: 'type',
+    title: '类型',
+    foot: '-',
+  },
+  {
+    colKey: 'default',
+    title: '默认值',
+    foot: (h, { row }) => <span>{row.default || '空'}</span>,
+  },
+  {
+    colKey: 'required',
+    title: '是否必传',
+    width: 150,
+    // 使用插槽渲染，插槽名称为 't-foot-required'
+    foot: 't-foot-required',
+  },
+  {
+    colKey: 'detail.postion',
+    title: '详情信息',
+    width: 200,
+    ellipsis: true,
+    foot: () => <div>渲染函数输出表尾信息</div>,
+  },
+];
+
+// type 可选值：foot 和 body
+function rowClassName({ type }) {
+  if (type === 'foot') return 't-tdesign__custom-footer-tr';
+  return 't-tdesign__custom-body-tr';
+}
+</script>

examples/table/demos/data-sort.vue

@@ -52,40 +52,17 @@ const columns = [
     sortType: 'all',
     sorter: (a, b) => a.survivalTime - b.survivalTime,
   },
-  { colKey: 'owner', title: '管理员', width: 100 },
+  // { colKey: 'owner', title: '管理员', width: 100 },
 ];
 
 // 本地数据排序，表示组件内部会对参数 data 进行数据排序。如果 data 数据为 10 条，就仅对这 10 条数据进行排序。
-const initData = [
-  {
-    id: 1,
-    instance: 'JQTest1',
-    status: 0,
-    owner: 'jenny;peter',
-    survivalTime: 1000,
-  },
-  {
-    id: 2,
-    instance: 'JQTest2',
-    status: 1,
-    owner: 'jenny',
-    survivalTime: 1000,
-  },
-  {
-    id: 3,
-    instance: 'JQTest3',
-    status: 2,
-    owner: 'jenny',
-    survivalTime: 500,
-  },
-  {
-    id: 4,
-    instance: 'JQTest4',
-    status: 1,
-    owner: 'peter',
-    survivalTime: 1500,
-  },
-];
+const initData = new Array(4).fill(null).map((_, i) => ({
+  id: i + 1,
+  instance: `JQTest${i + 1}`,
+  status: [0, 1, 2, 1][i % 3],
+  owner: ['jenny;peter', 'jenny', 'peter'][i % 3],
+  survivalTime: [1000, 1000, 500, 1500][i % 3],
+}));
 
 const data = ref([...initData]);
 const sort = ref({});
@@ -116,14 +93,19 @@ watch(
 );
 
 const sortChange = (sortVal, options) => {
+  console.log('sort-change', sortVal, options);
+  // sort.value 和 data.value 的赋值都是必须
   sort.value = sortVal;
-  console.log('#### sortChange:', sortVal, options);
+  data.value = options.currentDataSource;
 };
 
-const dataChange = (dataVal) => {
-  data.value = dataVal;
+const dataChange = (data) => {
+  // 除了 sortChange，也可以在这里对 data.value 进行赋值
+  // data.value = data;
+  console.log('data-change', data);
 };
 </script>
+
 <style lang="less">
 :deep([class*='t-table-expandable-icon-cell']) .t-icon {
   background-color: transparent;