✨(component): update

package/component/package.json

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

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

@@ -84,9 +84,7 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
 
 const isExpand: WritableComputedRef<any> = computed({
   get() {
-    return tableExpandAll.value
+    return tableExpandAll.value ? true : tableExpandKeys.value.includes(props.data[props.id]);
-      ? true
-      : tableExpandKeys.value.includes(props.data[props.id]);
   },
   set(val) {
     let newTableExpandKeys = [...tableExpandKeys.value];

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

@@ -64,8 +64,8 @@ const props = withDefaults(defineProps<LayTableProps>(), {
   expandIndex: 0,
   rowStyle: "",
   cellStyle: "",
-  spanMethod: () => {},
   defaultExpandAll: false,
+  spanMethod: () => { },
   expandKeys: () => [],
 });
 
@@ -97,6 +97,7 @@ const tableColumnKeys = ref(
 );
 
 const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
+const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
 
 watch(
   () => props.selectedKeys,
@@ -106,6 +107,14 @@ watch(
   { deep: true }
 );
 
+watch(
+  () => props.expandKeys,
+  () => {
+    tableExpandKeys.value = props.expandKeys;
+  },
+  { deep: true }
+);
+
 const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   get() {
     return props.selectedKey;
@@ -115,15 +124,6 @@ const tableSelectedKey: WritableComputedRef<Recordable[]> = computed({
   },
 });
 
-const tableExpandKeys: WritableComputedRef<Recordable[]> = computed({
-  get() {
-    return [...props.expandKeys];
-  },
-  set(val) {
-    emit("update:expandKeys", val);
-  },
-});
-
 watch(
   () => props.dataSource,
   () => {
@@ -132,7 +132,7 @@ watch(
   { deep: true }
 );
 
-const changeAll = function (checked: any) {
+const changeAll = (checked: any) => {
   const ids = props.dataSource.map((item: any) => {
     return item[props.id];
   });
@@ -164,6 +164,12 @@ watch(
   { deep: true, immediate: true }
 );
 
+watch(tableExpandKeys, () => {
+  emit("update:expandKeys", tableExpandKeys.value);
+},
+  { deep: true, immediate: true }
+)
+
 const change = function (page: any) {
   emit("change", page);
 };
@@ -433,31 +439,15 @@ const renderTotalRowCell = (column: any) => {
             </div>
             <template #content>
               <div class="layui-table-tool-checkbox">
-                <lay-checkbox
+                <lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
-                  v-for="column in columns"
+                  :value="column.key">{{ column.title }}</lay-checkbox>
-                  v-model="tableColumnKeys"
-                  skin="primary"
-                  :key="column.key"
-                  :value="column.key"
-                  >{{ column.title }}</lay-checkbox
-                >
               </div>
             </template>
           </lay-dropdown>
-          <div
+          <div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
-            class="layui-inline"
-            title="导出"
-            lay-event="LAYTABLE_PRINT"
-            @click="exportData()"
-          >
             <i class="layui-icon layui-icon-export"></i>
           </div>
-          <div
+          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
-            class="layui-inline"
-            title="打印"
-            lay-event="LAYTABLE_PRINT"
-            @click="print()"
-          >
             <i class="layui-icon layui-icon-print"></i>
           </div>
         </div>
@@ -465,34 +455,22 @@ const renderTotalRowCell = (column: any) => {
 
       <div class="layui-table-box">
         <!-- 表头 -->
-        <div
+        <div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
-          class="layui-table-header"
-          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
-        >
           <div class="layui-table-header-wrapper" ref="tableHeader">
             <table class="layui-table" :lay-size="size" :lay-skin="skin">
               <colgroup>
                 <template v-for="column in columns" :key="column">
                   <template v-if="tableColumnKeys.includes(column.key)">
-                    <col
+                    <col :width="column.width" :style="{
-                      :width="column.width"
-                      :style="{
                       minWidth: column.minWidth ? column.minWidth : '50px',
-                      }"
+                    }" />
-                    />
                   </template>
                 </template>
               </colgroup>
               <thead>
                 <tr>
-                  <template
+                  <template v-for="(column, columnIndex) in columns" :key="column">
-                    v-for="(column, columnIndex) in columns"
+                    <th v-if="tableColumnKeys.includes(column.key)" class="layui-table-cell" :class="[
-                    :key="column"
-                  >
-                    <th
-                      v-if="tableColumnKeys.includes(column.key)"
-                      class="layui-table-cell"
-                      :class="[
                       renderFixedClassName(column, columnIndex),
                       column.fixed ? `layui-table-fixed-${column.fixed}` : '',
                       column.type == 'checkbox'
@@ -502,22 +480,15 @@ const renderTotalRowCell = (column: any) => {
                       column.type == 'number'
                         ? 'layui-table-cell-number'
                         : '',
-                      ]"
+                    ]" :style="[
-                      :style="[
   {
     textAlign: column.align,
   },
   renderFixedStyle(column, columnIndex),
-                      ]"
+]">
-                    >
                       <template v-if="column.type == 'checkbox'">
-                        <lay-checkbox
+                        <lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
-                          v-model="hasChecked"
+                          @change="changeAll" />
-                          :is-indeterminate="!allChecked"
-                          skin="primary"
-                          value="all"
-                          @change="changeAll"
-                        />
                       </template>
                       <template v-else>
                         <span>
@@ -529,21 +500,11 @@ const renderTotalRowCell = (column: any) => {
                           </template>
                         </span>
                         <!-- 插槽 -->
-                        <span
+                        <span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
-                          v-if="column.sort"
+                          <i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
-                          class="layui-table-sort layui-inline"
+                            title="升序"></i>
-                          lay-sort
+                          <i @click.stop="sortTable($event, column.key, 'desc')"
-                        >
+                            class="layui-edge layui-table-sort-desc" title="降序"></i>
-                          <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>
@@ -554,59 +515,29 @@ const renderTotalRowCell = (column: any) => {
           </div>
         </div>
         <!-- 表身 -->
-        <div
+        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
-          class="layui-table-body layui-table-main"
+          ref="tableBody">
-          :style="{ height: height, maxHeight: maxHeight }"
+          <table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
-          ref="tableBody"
+            :lay-size="size" :lay-skin="skin">
-        >
-          <table
-            v-if="tableDataSource.length > 0"
-            class="layui-table"
-            :class="{ 'layui-table-even': props.even }"
-            :lay-size="size"
-            :lay-skin="skin"
-          >
             <colgroup>
-              <template
+              <template v-for="(column, columnIndex) in columns" :key="columnIndex">
-                v-for="(column, columnIndex) in columns"
-                :key="columnIndex"
-              >
                 <template v-if="tableColumnKeys.includes(column.key)">
-                  <col
+                  <col :width="column.width" :style="{
-                    :width="column.width"
-                    :style="{
                     minWidth: column.minWidth ? column.minWidth : '50px',
-                    }"
+                  }" />
-                  />
                 </template>
               </template>
             </colgroup>
             <tbody>
               <!-- 渲染 -->
               <template v-for="(data, index) in tableDataSource" :key="index">
-                <table-row
+                <table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
-                  :id="id"
+                  :currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
-                  :index="index"
+                  :expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
-                  :data="data"
+                  :cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
-                  :columns="columns"
+                  :spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" @row="rowClick"
-                  :indent-size="indentSize"
+                  @row-double="rowDoubleClick" @row-contextmenu="rowContextmenu" v-model:expandKeys="tableExpandKeys"
-                  :currentIndentSize="currentIndentSize"
+                  v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey">
-                  :tableColumnKeys="tableColumnKeys"
-                  :expandSpace="childrenExpandSpace"
-                  :expandIndex="expandIndex"
-                  :cellStyle="cellStyle"
-                  :cellClassName="cellClassName"
-                  :rowStyle="rowStyle"
-                  :rowClassName="rowClassName"
-                  :spanMethod="spanMethod"
-                  :defaultExpandAll="defaultExpandAll"
-                  @row="rowClick"
-                  @row-double="rowDoubleClick"
-                  @row-contextmenu="rowContextmenu"
-                  v-model:expandKeys="tableExpandKeys"
-                  v-model:selectedKeys="tableSelectedKeys"
-                  v-model:selectedKey="tableSelectedKey"
-                >
                   <template v-for="name in slotsData" #[name]="{ data }">
                     <slot :name="name" :data="data"></slot>
                   </template>
@@ -616,10 +547,7 @@ const renderTotalRowCell = (column: any) => {
                 </table-row>
               </template>
               <tr v-if="hasTotalRow" class="layui-table-total">
-                <template
+                <template v-for="(column, columnIndex) in columns" :key="columnIndex">
-                  v-for="(column, columnIndex) in columns"
-                  :key="columnIndex"
-                >
                   <template v-if="tableColumnKeys.includes(column.key)">
                     <td>{{ renderTotalRowCell(column) }}</td>
                   </template>
@@ -631,15 +559,8 @@ const renderTotalRowCell = (column: any) => {
         </div>
       </div>
       <div v-if="page" class="layui-table-page">
-        <lay-page
+        <lay-page show-page show-skip show-limit :total="page.total" :limit="page.limit" v-model="page.current"
-          show-page
+          @jump="change">
-          show-skip
-          show-limit
-          :total="page.total"
-          :limit="page.limit"
-          v-model="page.current"
-          @jump="change"
-        >
           <template #prev>
             <lay-icon type="layui-icon-left" />
           </template>

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

@@ -226,8 +226,8 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。
 
 <template>
-  展开行: {{ expandKeys6 }}
+  {{ expandKeys6 }}
-  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expand-keys="expandKeys6">
+  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expandKeys="expandKeys6">
     <template v-slot:expand="{ data }"> 
       <lay-table :columns="columns6" :data-source="dataSource6"></lay-table>
     </template>
@@ -282,7 +282,8 @@ export default {
 ::: demo 树形数据的展示，当数据中有 children 字段时会自动展示为树形表格, 通过设置 indentSize 以控制每一层的缩进宽度, 使用 childrenColumnName 替换默认字段
 
 <template>
-  <lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="true">
+  {{ expandKeys7 }}
+  <lay-table :columns="columns7" :data-source="dataSource7" :default-expand-all="defaultExpandAll7" v-model:expandKeys="expandKeys7">
     <template #score="{ data }">{{ data }}</template>
   </lay-table>
 </template>
@@ -306,13 +307,18 @@ export default {
     ]
 
     const dataSource7 = [
-      {name:"系统管理", score:100, children: [{name:"用户管理", score:99, children: [{name:"用户修改", score:98},{name:"用户删除", score:97}]},{name:"角色管理", score:96}]},
+      {id: "1", name:"系统管理", score:100, children: [{id: "3", name:"用户管理", score:99},{id: "5", name:"角色管理", score:96,children: [{id: "7", name:"用户管理", score:99},{id: "8", name:"角色管理", score:96}]}]},
-      {name:"电商管理", score:100, children: [{name:"商品管理", score:11},{name:"分类管理", score:22}]},
+      {id: "2", name:"电商管理", score:100, children: [{id: "4", name:"商品管理", score:11},{id: "6", name:"分类管理", score:22}]},
     ]
 
+    const expandKeys7 = ref(["1"])
+    const defaultExpandAll7 = ref(false)
+
     return {
       columns7,
-      dataSource7
+      dataSource7,
+      expandKeys7,
+      defaultExpandAll7
     }
   }
 }
@@ -1277,7 +1283,8 @@ export default {
 | dataSource           | 数据源                        | --        | --      | --             |
 | checkbox             | 开启复选框                    | `boolean`  | `false` | `true` `false` |
 | id                   | 主键                          | `string`  | --      | --             |
-| v-model:selectedKeys | 选中项                        | --        | --      | --             |
+| v-model:selectedKeys | 选中项 (多选)                       | --        | --      | --             |
+| v-model:selectedKey  | 选中项 (单选)                       | --        | --      | --             |
 | default-toolbar      | 工具栏                        | `boolean` | `false` | `true` `false` |
 | size                 | 尺寸                          | `string`  | `md`    | `lg` `md` `sm` |
 | children-column-name | 树节点字段                    | `string`   | `children`| --            |
@@ -1291,6 +1298,9 @@ export default {
 | rowClassName         | 行类名称 function(row, rowIndex)                | `string` `function`  | --   | -- |
 | skin                 | 风格                | `string` | --   | `line` `row` `nob` |
 | expand-index         | 展开所在列                | `number` | --   | -- |
+| default-expand-all   | 默认展开所有列                | `boolean` | `false`   | `true` `false` |
+| expand-keys          | 展开的列                | `array` | `[]`   | -- |
+| span-method          | 合并算法                | `function` | --   | -- |
 
 :::
 

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -11,6 +11,15 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="1.3.x">
+      <ul> 
+      <a name="1-3-13"></a> 
+      <li> 
+        <h3>1.3.13 <span class="layui-badge-rim">2022-08-04</span></h3> 
+        <ul>     
+          <li>[修复] table 组件 expandKeys 不存在, 无法展开的问题。</li>
+        </ul>
+      </li>
+    </ul>
     <ul> 
       <a name="1-3-12"></a> 
       <li>