✨(table): 新增 defaultExpandAll 属性, 默认展开行, 适用子表与树表

package/component/package.json

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

package/component/src/component/switch/index.vue

@@ -53,7 +53,9 @@ const handleClick = () => {
 
 const styles = computed(() => {
   return {
-    "background-color": isActive.value ? props.onswitchColor : props.unswitchColor,
+    "background-color": isActive.value
+      ? props.onswitchColor
+      : props.unswitchColor,
   };
 });
 </script>

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

@@ -32,6 +32,7 @@ export interface LayTableRowProps {
   id: string;
   data: any;
   spanMethod: Function;
+  defaultExpandAll: boolean;
 }
 
 const slot = useSlots();
@@ -68,7 +69,7 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   },
 });
 
-const isExpand = ref(false);
+const isExpand = ref(props.defaultExpandAll);
 const slotsData = ref<string[]>([]);
 
 props.columns.map((value: any) => {
@@ -194,32 +195,31 @@ const spanMethodAttr = (
   row: any,
   column: any,
   rowIndex: number,
-  columnIndex: number) => {
-  
-const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
-  if(attrs instanceof Array) {
-    return {rowspan: attrs[0], colspan: attrs[1]}
-  } else if(attrs instanceof Object) {
+  columnIndex: number
+) => {
+  const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
+  if (attrs instanceof Array) {
+    return { rowspan: attrs[0], colspan: attrs[1] };
+  } else if (attrs instanceof Object) {
     return attrs;
   } else {
-    return {rowspan: 1, colspan: 1}
+    return { rowspan: 1, colspan: 1 };
   }
-}
+};
 
 const isAutoShow = (
   row: any,
   column: any,
   rowIndex: number,
-  columnIndex: number) => {
-
+  columnIndex: number
+) => {
   const attrs = spanMethodAttr(row, column, rowIndex, columnIndex);
-  if(attrs.colspan == 0 && attrs.rowspan == 0) {
+  if (attrs.colspan == 0 && attrs.rowspan == 0) {
     return false;
   } else {
     return true;
   }
-
-}
+};
 </script>
 
 <template>
@@ -444,8 +444,12 @@ const isAutoShow = (
             <td
               class="layui-table-cell"
               v-if="isAutoShow(data, column, index, columnIndex)"
-              :colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
-              :rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"  
+              :colspan="
+                spanMethodAttr(data, column, index, columnIndex).colspan
+              "
+              :rowspan="
+                spanMethodAttr(data, column, index, columnIndex).rowspan
+              "
               :style="[
                 {
                   textAlign: column.align,
@@ -527,6 +531,7 @@ const isAutoShow = (
         :rowStyle="rowStyle"
         :rowClassName="rowClassName"
         :spanMethod="spanMethod"
+        :defaultExpandAll="defaultExpandAll"
         @row="rowClick"
         @row-double="rowDoubleClick"
         @row-contextmenu="rowContextmenu"

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

@@ -46,6 +46,7 @@ export interface LayTableProps {
   rowStyle?: string | Function;
   cellStyle?: string | Function;
   spanMethod?: Function;
+  defaultExpandAll?: boolean;
 }
 
 const props = withDefaults(defineProps<LayTableProps>(), {
@@ -62,7 +63,8 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   expandIndex: 0,
   rowStyle: "",
   cellStyle: "",
-  spanMethod: () => {}
+  spanMethod: () => {},
+  defaultExpandAll: false,
 });
 
 const tableId = uuidv4();
@@ -93,9 +95,13 @@ const tableColumnKeys = ref(
 
 const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
 
-watch(() => props.selectedKeys, () => {
+watch(
+  () => props.selectedKeys,
+  () => {
     tableSelectedKeys.value = props.selectedKeys;
-},{deep: true})
+  },
+  { deep: true }
+);
 
 const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   get() {
@@ -287,7 +293,7 @@ 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 {
@@ -578,6 +584,7 @@ const renderTotalRowCell = (column: any) => {
                   :rowStyle="rowStyle"
                   :rowClassName="rowClassName"
                   :spanMethod="spanMethod"
+                  :defaultExpandAll="defaultExpandAll" 
                   @row="rowClick"
                   @row-double="rowDoubleClick"
                   @row-contextmenu="rowContextmenu"

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

@@ -226,7 +226,7 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。
 
 <template>
-  <lay-table :columns="columns6" :data-source="dataSource6">
+  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="true">
     <template v-slot:expand="{ data }"> 
       <lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
     </template>
@@ -276,7 +276,7 @@ export default {
 ::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
 
 <template>
-  <lay-table :columns="columns7" :data-source="dataSource7">
+  <lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="true">
     <template #score="{ data }">{{ data }}</template>
   </lay-table>
 </template>
@@ -817,7 +817,7 @@ export default {
 ::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
 
 <template>
-  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24" :spanMethod="spanMethod24"></lay-table>
+  <lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24"></lay-table>
 </template>
 
 <script>
@@ -850,8 +850,6 @@ export default {
       }
     ]
 
-    const selectedKey24 = ref("2");
-
     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) '},
@@ -879,7 +877,6 @@ export default {
       columns24,
       dataSource24,
       spanMethod24,
-      selectedKey24,
     }
   }
 }