📝(component): 编写 table 行内编辑案例

package/component/src/component/checkbox/index.vue

@@ -127,7 +127,13 @@ const isDisabled = computed(() => {
         ><slot>{{ label }}</slot></span
       >
       <lay-icon
-        :type="props.isIndeterminate && isChecked ? 'layui-icon-subtraction' : isChecked ? 'layui-icon-ok' : ''"
+        :type="
+          props.isIndeterminate && isChecked
+            ? 'layui-icon-subtraction'
+            : isChecked
+            ? 'layui-icon-ok'
+            : ''
+        "
       ></lay-icon>
     </div>
   </span>

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

@@ -84,17 +84,22 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
 
 const isExpand: WritableComputedRef<any> = computed({
   get() {
-    return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
+    return tableExpandAll.value
+      ? true
+      : tableExpandKeys.value.includes(props.data[props.id]);
   },
   set(val) {
-      let newTableExpandKeys = [...tableExpandKeys.value]
+    let newTableExpandKeys = [...tableExpandKeys.value];
-      if (!val) {
+    if (!val) {
-        newTableExpandKeys.splice(newTableExpandKeys.indexOf(props.data[props.id]), 1);
+      newTableExpandKeys.splice(
-      } else {
+        newTableExpandKeys.indexOf(props.data[props.id]),
-        newTableExpandKeys.push(props.data[props.id]);
+        1
-      }
+      );
-      tableExpandAll.value = false;
+    } else {
-      tableExpandKeys.value = newTableExpandKeys;
+      newTableExpandKeys.push(props.data[props.id]);
+    }
+    tableExpandAll.value = false;
+    tableExpandKeys.value = newTableExpandKeys;
   },
 });
 

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

@@ -66,7 +66,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   cellStyle: "",
   spanMethod: () => {},
   defaultExpandAll: false,
-  expandKeys: () => []
+  expandKeys: () => [],
 });
 
 const tableId = uuidv4();
@@ -305,7 +305,10 @@ const getFixedColumn = () => {
       hasr.value = true;
     } else {
       // @ts-ignore
-      if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 > tableBody.value?.scrollWidth) {
+      if (
+        tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 >
+        tableBody.value?.scrollWidth
+      ) {
         hasl.value = true;
         hasr.value = false;
       } else {

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

@@ -817,79 +817,6 @@ export default {
 
 :::
 
-::: title 合并行列
-:::
-
-::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
-
-<template>
-  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24"></lay-table>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const columns24 = [
-      {
-        title:"账户",
-        width:"200px",
-        key:"username"
-      },{
-        title:"密码",
-        width: "300px",
-        key:"password"
-      },{
-        title:"性别",
-        key:"sex"
-      },{
-        title:"年龄",
-        width: "300px",
-        key:"age"
-      },{
-        title:"备注",
-        width: "180px",
-        key:"remark",
-        ellipsisTooltip: true
-      }
-    ]
-
-    const dataSource24 = [
-      {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) '}
-    ]
-
-    const spanMethod24 = (
-      row,
-      column,
-      rowIndex,
-      columnIndex,
-    ) => {
-      if (rowIndex % 2 === 0) {
-        if (columnIndex === 0) {
-          return [1, 2]
-        } else if (columnIndex === 1) {
-          return [0, 0]
-        }
-      }
-    }
-
-    return {
-      columns24,
-      dataSource24,
-      spanMethod24,
-    }
-  }
-}
-</script>
-
-:::
-
 ::: title 暂无数据
 :::
 
@@ -1065,6 +992,162 @@ export default {
 
 :::
 
+::: title 合并行列
+:::
+
+::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
+
+<template>
+  <lay-table :columns="columns27" :data-source="dataSource27" :span-method="spanMethod27"></lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const columns27 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource27 = [
+      {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) '}
+    ]
+
+    const spanMethod27 = (
+      row,
+      column,
+      rowIndex,
+      columnIndex,
+    ) => {
+      if (rowIndex % 2 === 0) {
+        if (columnIndex === 0) {
+          return [1, 2]
+        } else if (columnIndex === 1) {
+          return [0, 0]
+        }
+      }
+    }
+
+    return {
+      columns27,
+      dataSource27,
+      spanMethod27,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 行内编辑
+:::
+
+::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
+
+<template>
+  <lay-table :columns="columns28" :data-source="dataSource28">
+    <template #username="{ data }">
+      <lay-input v-if="edingKeys[data.id]" v-model="data.username" >
+        <template #suffix>
+          <lay-icon type="layui-icon-close" style="right:10px;" v-if="edingKeys[data.id]"  @click="deleteEdit(data.id)"></lay-icon>
+        </template>
+      </lay-input>
+      <span v-else>
+        {{ data.username }} 
+        <lay-icon type="layui-icon-edit" style="position: absolute;right: 10px;" v-if="!edingKeys[data.id]"  @click="editHandle(data.id)"></lay-icon>
+      </span>
+    </template>
+  </lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const edingKeys = ref([])
+
+    const editHandle = (key) => {
+      edingKeys.value.push(key);
+    }
+
+    const deleteEdit = (key) => {
+      edingKeys.value.splice(edingKeys.value.indexOf(key),1);
+    }
+
+    const columns28 = [
+      {
+        title:"账户",
+        width:"200px",
+        key:"username",
+        customSlot: "username"
+      },{
+        title:"密码",
+        width: "300px",
+        key:"password"
+      },{
+        title:"性别",
+        key:"sex"
+      },{
+        title:"年龄",
+        width: "300px",
+        key:"age"
+      },{
+        title:"备注",
+        width: "180px",
+        key:"remark",
+        ellipsisTooltip: true
+      }
+    ]
+
+    const dataSource28 = [
+      {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 {
+      edingKeys,
+      deleteEdit,
+      columns28,
+      editHandle,
+      dataSource28,
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 完整表格
 :::