♻️(table): 重构 checkbox 实现方式

package/component/src/component/table/TableRow.vue

@@ -144,7 +144,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
       return { right: `${right}px` } as StyleValue;
     }
   }
-  return { } as StyleValue;
+  return {} as StyleValue;
 };
 
 const renderFixedClassName = (column: any, columnIndex: number) => {
@@ -178,22 +178,11 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
     @dblclick.stop="rowDoubleClick(data, $event)"
     @contextmenu.stop="contextmenu(data, $event)"
   >
-    <!-- 复选框 -->
-    <td v-if="checkbox" class="layui-table-col-special">
-      <div class="layui-table-cell laytable-cell-checkbox">
-        <lay-checkbox
-          v-model="tableSelectedKeys"
-          :value="data[id]"
-          skin="primary"
-        />
-      </div>
-    </td>
-
     <!-- 数据列 -->
     <template v-for="(column, columnIndex) in columns" :key="columnIndex">
       <!-- 展示否 -->
       <template v-if="tableColumnKeys.includes(column.key)">
-        <template v-if="column.type == 'number'">
+        <template v-if="column.type == 'checkbox'">
           <td
             class="layui-table-cell"
             :style="[
@@ -205,6 +194,58 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               renderCellStyle(data, column, index, columnIndex),
             ]"
             :class="[
+              renderFixedClassName(column, columnIndex),
+              renderCellClassName(data, column, index, columnIndex),
+              column.fixed ? `layui-table-fixed-${column.fixed}` : '',
+            ]"
+          >
+            <!-- 树表占位与缩进 -->
+            <span
+              v-if="expandSpace && columnIndex === expandIndex"
+              :style="{ 'margin-right': currentIndentSize + 'px' }"
+            ></span>
+
+            <span
+              v-if="
+                expandSpace &&
+                !data[childrenColumnName] &&
+                !slot.expand &&
+                columnIndex === expandIndex
+              "
+              class="layui-table-cell-expand-icon-spaced"
+            ></span>
+
+            <lay-icon
+              v-if="
+                (slot.expand || data[childrenColumnName]) &&
+                columnIndex === expandIndex
+              "
+              class="layui-table-cell-expand-icon"
+              :type="expandIconType"
+              @click="handleExpand"
+            ></lay-icon>
+
+            <lay-checkbox
+              v-model="tableSelectedKeys"
+              :value="data[id]"
+              skin="primary"
+            />
+          </td>
+        </template>
+
+        <template v-if="column.type == 'number'">
+          <td
+            class="layui-table-cell"
+            :style="[
+              {
+                textAlign: column.align,
+                whiteSpace: column.ellipsisTooltip ? 'nowrap' : 'normal',
+              },
+              renderFixedStyle(column, columnIndex),
+              renderCellStyle(data, column, index, columnIndex),
+            ]"
+            :class="[
+              renderFixedClassName(column, columnIndex),
               renderCellClassName(data, column, index, columnIndex),
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"
@@ -235,13 +276,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               @click="handleExpand"
             ></lay-icon>
 
-            <lay-tooltip
-              v-if="column.ellipsisTooltip"
-              :content="data[column.key]"
-              :isAutoShow="true"
-            >
-              {{ index + 1 }}
-            </lay-tooltip>
             {{ index + 1 }}
           </td>
         </template>
@@ -259,6 +293,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
               renderCellStyle(data, column, index, columnIndex),
             ]"
             :class="[
+              renderFixedClassName(column, columnIndex),
               renderCellClassName(data, column, index, columnIndex),
               column.fixed ? `layui-table-fixed-${column.fixed}` : '',
             ]"

package/component/src/component/table/index.vue

@@ -6,7 +6,15 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { ref, watch, useSlots, withDefaults, onMounted, onUpdated, StyleValue } from "vue";
+import {
+  ref,
+  watch,
+  useSlots,
+  withDefaults,
+  onMounted,
+  onUpdated,
+  StyleValue,
+} from "vue";
 import { v4 as uuidv4 } from "../../utils/guidUtil";
 import { Recordable } from "../../types";
 import { LayIcon } from "@layui/icons-vue";
@@ -20,8 +28,6 @@ export interface LayTableProps {
   skin?: string;
   size?: string;
   page?: Recordable;
-  checkbox?: boolean;
-  radio?: boolean;
   columns: Recordable[];
   dataSource: Recordable[];
   defaultToolbar?: boolean;
@@ -69,7 +75,7 @@ const slots = slot.default && slot.default();
 
 const allChecked = ref(false);
 const hasChecked = ref(false);
-const tableDataSource = ref([...props.dataSource]);
+const tableDataSource = ref<any[]>([...props.dataSource]);
 const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
 const tableColumns = ref([...props.columns]);
 const tableColumnKeys = ref(
@@ -275,7 +281,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
       return { right: `${right}px` } as StyleValue;
     }
   }
-  return { } as StyleValue;
+  return {} as StyleValue;
 };
 
 const renderFixedClassName = (column: any, columnIndex: number) => {
@@ -352,7 +358,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
         <div class="layui-table-header" ref="tableHeader">
           <table class="layui-table" :lay-size="size" :lay-skin="skin">
             <colgroup>
-              <col v-if="checkbox" class="layui-table-col-special" />
               <template v-for="column in columns" :key="column">
                 <template v-if="tableColumnKeys.includes(column.key)">
                   <col
@@ -367,17 +372,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
             </colgroup>
             <thead>
               <tr>
-                <th v-if="checkbox" class="layui-table-col-special">
-                  <div class="layui-table-cell laytable-cell-checkbox">
-                    <lay-checkbox
-                      v-model="hasChecked"
-                      :is-indeterminate="!allChecked"
-                      skin="primary"
-                      value="all"
-                      @change="changeAll"
-                    />
-                  </div>
-                </th>
                 <template
                   v-for="(column, columnIndex) in columns"
                   :key="column"
@@ -396,31 +390,42 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                       renderFixedStyle(column, columnIndex),
                     ]"
                   >
-                    <span>
-                      <template v-if="column.titleSlot">
-                        <slot :name="column.titleSlot"></slot>
-                      </template>
-                      <template v-else>
-                        {{ column.title }}
-                      </template>
-                    </span>
-                    <!-- 插槽 -->
-                    <span
-                      v-if="column.sort"
-                      class="layui-table-sort layui-inline"
-                      lay-sort
-                    >
-                      <i
-                        @click.stop="sortTable($event, column.key, 'asc')"
-                        class="layui-edge layui-table-sort-asc"
-                        title="升序"
-                      ></i>
-                      <i
-                        @click.stop="sortTable($event, column.key, 'desc')"
-                        class="layui-edge layui-table-sort-desc"
-                        title="降序"
-                      ></i>
-                    </span>
+                    <template v-if="column.type == 'checkbox'">
+                      <lay-checkbox
+                        v-model="hasChecked"
+                        :is-indeterminate="!allChecked"
+                        skin="primary"
+                        value="all"
+                        @change="changeAll"
+                      />
+                    </template>
+                    <template v-else>
+                      <span>
+                        <template v-if="column.titleSlot">
+                          <slot :name="column.titleSlot"></slot>
+                        </template>
+                        <template v-else>
+                          {{ column.title }}
+                        </template>
+                      </span>
+                      <!-- 插槽 -->
+                      <span
+                        v-if="column.sort"
+                        class="layui-table-sort layui-inline"
+                        lay-sort
+                      >
+                        <i
+                          @click.stop="sortTable($event, column.key, 'asc')"
+                          class="layui-edge layui-table-sort-asc"
+                          title="升序"
+                        ></i>
+                        <i
+                          @click.stop="sortTable($event, column.key, 'desc')"
+                          class="layui-edge layui-table-sort-desc"
+                          title="降序"
+                        ></i>
+                      </span>
+                    </template>
                   </th>
                 </template>
                 <th
@@ -447,7 +452,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
             :lay-skin="skin"
           >
             <colgroup>
-              <col v-if="checkbox" class="layui-table-col-special" />
               <template v-for="column in columns" :key="column">
                 <template v-if="tableColumnKeys.includes(column.key)">
                   <col
@@ -467,7 +471,6 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                   :index="index"
                   :data="data"
                   :columns="columns"
-                  :checkbox="checkbox"
                   :indent-size="indentSize"
                   :currentIndentSize="currentIndentSize"
                   :tableColumnKeys="tableColumnKeys"

package/document-component/src/document/zh-CN/components/table.md

@@ -613,13 +613,12 @@ export default {
 
 :::
 
-::: title 刷新数据
+::: title 开启序号
 :::
 
-::: demo 通过 `data-source` 的赋值，实现数据的更新
+::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
 
 <template>
-  <lay-button @click="changeDataSource21">更新数据</lay-button>
   <lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
 </template>
 
@@ -630,6 +629,12 @@ export default {
   setup() {
 
     const columns21 = [
+      {
+        title: "ID",
+        width: "30px",
+        type: "number",
+        align: "center"
+      },
       {
         title:"账户",
         width:"200px",
@@ -654,7 +659,135 @@ export default {
       }
     ]
 
-    const dataSource21 = ref([
+    const dataSource21 = [
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns21,
+      dataSource21,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 开启多选
+:::
+
+::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` 与 `right`。
+
+<template>
+  <lay-table :columns="columns23" :dataSource="dataSource23"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns23 = [
+      {
+        title: "ID",
+        width: "30px",
+        type: "checkbox",
+        align: "center"
+      },
+      {
+        title:"标识",
+        width:"30px",
+        key:"id"
+      },
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        width: "300px",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource23 = [
+      {id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
+      {id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
+    ]
+
+    return {
+      columns23,
+      dataSource23,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 刷新数据
+:::
+
+::: demo 通过 `data-source` 的赋值，实现数据的更新
+
+<template>
+  <lay-button @click="changeDataSource22">更新数据</lay-button>
+  <lay-table :columns="columns22" :dataSource="dataSource22"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns22 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        width: "300px",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource22 = ref([
       {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
       {username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
       {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
@@ -662,14 +795,14 @@ export default {
       {username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
     ])
     
-    const changeDataSource21 = () => {
+    const changeDataSource22 = () => {
       dataSource21.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
     }
 
     return {
-      columns21,
-      dataSource21,
-      changeDataSource21
+      columns22,
+      dataSource22,
+      changeDataSource22
     }
   }
 }