✨(component): 新增 table 组件 v-model:expandKeys 属性, 意为当前展开行

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.3.12-alpha.4",
+  "version": "1.3.12-alpha.5",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

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

@@ -127,13 +127,7 @@ 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

@@ -33,6 +33,7 @@ export interface LayTableRowProps {
   data: any;
   spanMethod: Function;
   defaultExpandAll: boolean;
+  expandKeys: Recordable[];
 }
 
 const slot = useSlots();
@@ -40,6 +41,7 @@ const emit = defineEmits([
   "row",
   "row-double",
   "row-contextmenu",
+  "update:expandKeys",
   "update:selectedKeys",
   "update:selectedKey",
 ]);
@@ -51,6 +53,17 @@ const props = withDefaults(defineProps<LayTableRowProps>(), {
   cellClassName: "",
 });
 
+const tableExpandAll = ref(props.defaultExpandAll);
+
+const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
+  get() {
+    return [...props.expandKeys];
+  },
+  set(val) {
+    emit("update:expandKeys", val);
+  },
+});
+
 const tableSelectedKeys: WritableComputedRef<Recordable[]> = computed({
   get() {
     return [...props.selectedKeys];
@@ -69,7 +82,22 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   },
 });
 
-const isExpand = ref(props.defaultExpandAll);
+const isExpand: WritableComputedRef<any> = computed({
+  get() {
+    return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
+  },
+  set(val) {
+      let newTableExpandKeys = [...tableExpandKeys.value]
+      if (!val) {
+        newTableExpandKeys.splice(newTableExpandKeys.indexOf(props.data[props.id]), 1);
+      } else {
+        newTableExpandKeys.push(props.data[props.id]);
+      }
+      tableExpandAll.value = false;
+      tableExpandKeys.value = newTableExpandKeys;
+  },
+});
+
 const slotsData = ref<string[]>([]);
 
 props.columns.map((value: any) => {
@@ -535,6 +563,7 @@ const isAutoShow = (
         @row="rowClick"
         @row-double="rowDoubleClick"
         @row-contextmenu="rowContextmenu"
+        v-model:expandKeys="tableExpandKeys"
         v-model:selectedKeys="tableSelectedKeys"
         v-model:selectedKey="tableSelectedKey"
       >

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

@@ -47,6 +47,7 @@ export interface LayTableProps {
   cellStyle?: string | Function;
   spanMethod?: Function;
   defaultExpandAll?: boolean;
+  expandKeys?: Recordable[];
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -65,12 +66,14 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   cellStyle: "",
   spanMethod: () => {},
   defaultExpandAll: false,
+  expandKeys: () => []
 });
 
 const tableId = uuidv4();
 
 const emit = defineEmits([
   "change",
+  "update:expandKeys",
   "update:selectedKeys",
   "update:selectedKey",
   "row-contextmenu",
@@ -112,6 +115,15 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   },
 });
 
+const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
+  get() {
+    return [...props.expandKeys];
+  },
+  set(val) {
+    emit("update:expandKeys", val);
+  },
+});
+
 watch(
   () => props.dataSource,
   () => {
@@ -588,6 +600,7 @@ const renderTotalRowCell = (column: any) => {
                   @row="rowClick"
                   @row-double="rowDoubleClick"
                   @row-contextmenu="rowContextmenu"
+                  v-model:expandKeys="tableExpandKeys"
                   v-model:selectedKeys="tableSelectedKeys"
                   v-model:selectedKey="tableSelectedKey"
                 >

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

@@ -226,7 +226,8 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。
 
 <template>
-  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="true">
+  展开行: {{ expandKeys6 }}
+  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expand-keys="expandKeys6">
     <template v-slot:expand="{ data }"> 
       <lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
     </template>
@@ -252,17 +253,22 @@ export default {
     ]
 
     const dataSource6 = [
-      {name:"张三", score:100},
-      {name:"李四", score:80},
-      {name:"王二", score:99},
-      {name:"麻子", score:92},
-      {name:"无名", score:60},
-      {name:"有名", score:70},
+      {id:"1", name:"张三", score:100},
+      {id:"2", name:"李四", score:80},
+      {id:"3", name:"王二", score:99},
+      {id:"4", name:"麻子", score:92},
+      {id:"5", name:"无名", score:60},
+      {id:"6", name:"有名", score:70},
     ]
 
+    const expandKeys6 = ref(["1"])
+    const defaultExpandAll6 = ref(false)
+
     return {
       columns6,
-      dataSource6
+      dataSource6,
+      expandKeys6,
+      defaultExpandAll6
     }
   }
 }