✨(component): update

2022-08-05 11:24:07 +08:00 · 2022-08-05 11:24:07 +08:00 · e93c1b5e2a
commit e93c1b5e2a
parent 888e0b0cc9
5 changed files with 97 additions and 159 deletions
--- a/package/component/package.json
+++ b/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",
--- a/package/component/src/component/table/TableRow.vue
+++ b/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
-      ? 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];
--- a/package/component/src/component/table/index.vue
+++ b/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);
 };
@ -201,7 +207,7 @@ const exportData = () => {
          throw new Error("exception");
        }
      });
-    } catch (e) {}
+    } catch (e) { }
  });
  tableDataSource.value.forEach((item) => {
    let obj: any = [];
@ -433,31 +439,15 @@ const renderTotalRowCell = (column: any) => {
            </div>
            <template #content>
              <div class="layui-table-tool-checkbox">
-                <lay-checkbox
-                  v-for="column in columns"
-                  v-model="tableColumnKeys"
-                  skin="primary"
-                  :key="column.key"
-                  :value="column.key"
-                  >{{ column.title }}</lay-checkbox
-                >
+                <lay-checkbox v-for="column in columns" v-model="tableColumnKeys" skin="primary" :key="column.key"
+                  :value="column.key">{{ column.title }}</lay-checkbox>
              </div>
            </template>
          </lay-dropdown>
-          <div
-            class="layui-inline"
-            title="导出"
-            lay-event="LAYTABLE_PRINT"
-            @click="exportData()"
-          >
+          <div class="layui-inline" title="导出" lay-event="LAYTABLE_PRINT" @click="exportData()">
            <i class="layui-icon layui-icon-export"></i>
          </div>
-          <div
-            class="layui-inline"
-            title="打印"
-            lay-event="LAYTABLE_PRINT"
-            @click="print()"
-          >
+          <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT" @click="print()">
            <i class="layui-icon layui-icon-print"></i>
          </div>
        </div>
@ -465,59 +455,40 @@ const renderTotalRowCell = (column: any) => {

      <div class="layui-table-box">
        <!-- 表头 -->
-        <div
-          class="layui-table-header"
-          :style="[{ 'padding-right': `${scrollWidthCell}px` }]"
-        >
+        <div 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
-                      :width="column.width"
-                      :style="{
-                        minWidth: column.minWidth ? column.minWidth : '50px',
-                      }"
-                    />
+                    <col :width="column.width" :style="{
+                      minWidth: column.minWidth ? column.minWidth : '50px',
+                    }" />
                  </template>
                </template>
              </colgroup>
              <thead>
                <tr>
-                  <template
-                    v-for="(column, columnIndex) in columns"
-                    :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'
-                          ? 'layui-table-cell-checkbox'
-                          : '',
-                        column.type == 'radio' ? 'layui-table-cell-radio' : '',
-                        column.type == 'number'
-                          ? 'layui-table-cell-number'
-                          : '',
-                      ]"
-                      :style="[
-                        {
-                          textAlign: column.align,
-                        },
-                        renderFixedStyle(column, columnIndex),
-                      ]"
-                    >
+                  <template v-for="(column, columnIndex) in columns" :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'
+                        ? 'layui-table-cell-checkbox'
+                        : '',
+                      column.type == 'radio' ? 'layui-table-cell-radio' : '',
+                      column.type == 'number'
+                        ? 'layui-table-cell-number'
+                        : '',
+                    ]" :style="[
+  {
+    textAlign: column.align,
+  },
+  renderFixedStyle(column, columnIndex),
+]">
                      <template v-if="column.type == 'checkbox'">
-                        <lay-checkbox
-                          v-model="hasChecked"
-                          :is-indeterminate="!allChecked"
-                          skin="primary"
-                          value="all"
-                          @change="changeAll"
-                        />
+                        <lay-checkbox v-model="hasChecked" :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
-                          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 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>
@ -554,59 +515,29 @@ const renderTotalRowCell = (column: any) => {
          </div>
        </div>
        <!-- 表身 -->
-        <div
-          class="layui-table-body layui-table-main"
-          :style="{ height: height, maxHeight: maxHeight }"
-          ref="tableBody"
-        >
-          <table
-            v-if="tableDataSource.length > 0"
-            class="layui-table"
-            :class="{ 'layui-table-even': props.even }"
-            :lay-size="size"
-            :lay-skin="skin"
-          >
+        <div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }"
+          ref="tableBody">
+          <table v-if="tableDataSource.length > 0" class="layui-table" :class="{ 'layui-table-even': props.even }"
+            :lay-size="size" :lay-skin="skin">
            <colgroup>
-              <template
-                v-for="(column, columnIndex) in columns"
-                :key="columnIndex"
-              >
+              <template v-for="(column, columnIndex) in columns" :key="columnIndex">
                <template v-if="tableColumnKeys.includes(column.key)">
-                  <col
-                    :width="column.width"
-                    :style="{
-                      minWidth: column.minWidth ? column.minWidth : '50px',
-                    }"
-                  />
+                  <col :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
-                  :id="id"
-                  :index="index"
-                  :data="data"
-                  :columns="columns"
-                  :indent-size="indentSize"
-                  :currentIndentSize="currentIndentSize"
-                  :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"
-                >
+                <table-row :id="id" :index="index" :data="data" :columns="columns" :indent-size="indentSize"
+                  :currentIndentSize="currentIndentSize" :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
-                  v-for="(column, columnIndex) in columns"
-                  :key="columnIndex"
-                >
+                <template 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
-          show-page
-          show-skip
-          show-limit
-          :total="page.total"
-          :limit="page.limit"
-          v-model="page.current"
-          @jump="change"
-        >
+        <lay-page show-page 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>
--- a/package/document-component/src/document/zh-CN/components/table.md
+++ b/package/document-component/src/document/zh-CN/components/table.md
@ -226,8 +226,8 @@ export default {
 ::: demo 当表格内容较多不能一次性完全展示时。

 <template>
-  展开行: {{ expandKeys6 }}
-  <lay-table :columns="columns6" :data-source="dataSource6" :default-expand-all="defaultExpandAll6" v-model:expand-keys="expandKeys6">
+  {{ 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}]},
-      {name:"电商管理", score:100, children: [{name:"商品管理", score:11},{name:"分类管理", score:22}]},
+      {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}]}]},
+      {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` | --   | -- |

 :::

--- a/package/document-component/src/document/zh-CN/guide/changelog.md
+++ b/package/document-component/src/document/zh-CN/guide/changelog.md
@ -11,9 +11,18 @@
 <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> 
+      <li>
        <h3>1.3.12 <span class="layui-badge-rim">2022-08-04</span></h3> 
        <ul>     
          <li>[新增] table 组件 单元格编辑。</li>