@scenetechnology/cj_iview_table 0.0.68 → 0.0.69

package/README.md

@@ -61,12 +61,13 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | height | String | - | 表格高度 |
 | maxHeight | String | - | 最大高度 |
 | toolBar | Array/Boolean | true | 工具栏配置 |
-| defaultSize | Number | - | 默认分页大小 |
-| rowKey | String/Boolean | id | 开启跨分页保留选中时使用的唯一键，支持如 `id`、`user.id` |
-| reserveSelection | Boolean | false | 是否保留跨分页、跨筛选/搜索的多选结果 |
-| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
-| filterLabelWidth | Number | 80 | 筛选标签宽度 |
-| fields | Array | [] | 导出数据时需要包含的属性名 |
+| defaultSize | Number | - | 默认分页大小 |
+| rowKey | String/Boolean | id | 开启跨分页保留选中时使用的唯一键，支持如 `id`、`user.id` |
+| selectedRowKeys | Array | [] | 外部传入的已选 rowKey 列表，可用于页面返回后恢复勾选 |
+| reserveSelection | Boolean | false | 是否保留跨分页、跨筛选/搜索的多选结果 |
+| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
+| filterLabelWidth | Number | 80 | 筛选标签宽度 |
+| fields | Array | [] | 导出数据时需要包含的属性名 |
 
 ### 列配置项
 每个column支持以下属性：
@@ -83,11 +84,12 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 | slot | Boolean | 是否使用自定义插槽 |
 
 ## 事件
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
-| on-selection-change | 当前页选中项变化时触发 | (selection) |
-| on-reserve-selection-change | 开启 `reserveSelection` 后，所有已保留选中项变化时触发 | (selection) |
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
+| on-selection-change | 当前页选中项变化时触发 | (selection) |
+| on-reserve-selection-change | 开启 `reserveSelection` 后，所有已保留选中项变化时触发 | (selection) |
+| on-reserve-selection-keys-change | 开启 `reserveSelection` 后，所有已保留选中的 rowKey 列表变化时触发 | (selectedRowKeys) |
 
 ## 插槽
 | 插槽名 | 说明 |
@@ -109,28 +111,63 @@ cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、
 - 列排序
 - 列固定
 
-### 3. 数据请求
-支持两种数据加载方式：
-- 通过data属性直接传入数据
-- 通过request函数异步加载数据
-
-### 4. 跨分页保留选中
-当表格包含 `type: 'selection'` 列时，可通过 `reserveSelection` 开启跨分页、跨搜索/筛选保留勾选。
-
-```vue
-<cj_iview_table
-  :columns="columns"
-  :request="loadData"
-  row-key="id"
-  :reserveSelection="true"
-  @on-reserve-selection-change="handleSelectionChange"
-/>
-```
-
-说明：
-- `rowKey` 必须能唯一标识一行数据，支持多级路径，例如 `user.id`
-- `on-selection-change` 返回的是当前页选中项
-- `on-reserve-selection-change` 返回的是所有分页/筛选范围内累计保留的选中项
+### 3. 数据请求
+支持两种数据加载方式：
+- 通过data属性直接传入数据
+- 通过request函数异步加载数据
+
+### 4. 跨分页保留选中
+当表格包含 `type: 'selection'` 列时，可通过 `reserveSelection` 开启跨分页、跨搜索/筛选保留勾选。
+
+```vue
+<cj_iview_table
+  :columns="columns"
+  :request="loadData"
+  row-key="id"
+  :reserveSelection="true"
+  @on-reserve-selection-change="handleSelectionChange"
+/>
+```
+
+说明：
+- `rowKey` 必须能唯一标识一行数据，支持多级路径，例如 `user.id`
+- `on-selection-change` 返回的是当前页选中项
+- `on-reserve-selection-change` 返回的是所有分页/筛选范围内累计保留的选中项
+
+### 5. 跨页面返回后恢复勾选
+如果你会在离开列表页后再回来，需要由父页面自己保存已选 rowKey 列表，并在重新进入时通过 `selectedRowKeys` 传回组件。
+
+```vue
+<cj_iview_table
+  :columns="columns"
+  :request="loadData"
+  row-key="id"
+  :reserveSelection="true"
+  :selectedRowKeys="savedSelectedRowKeys"
+  @on-reserve-selection-keys-change="handleReserveSelectionKeysChange"
+/>
+```
+
+```js
+export default {
+  data () {
+    return {
+      savedSelectedRowKeys: JSON.parse(sessionStorage.getItem('table-selected-row-keys') || '[]')
+    }
+  },
+  methods: {
+    handleReserveSelectionKeysChange (selectedRowKeys) {
+      this.savedSelectedRowKeys = selectedRowKeys
+      sessionStorage.setItem('table-selected-row-keys', JSON.stringify(selectedRowKeys))
+    }
+  }
+}
+```
+
+说明：
+- `selectedRowKeys` 传的是 rowKey 数组，不是整行数据
+- 组件会在数据重新加载后自动按这些 key 回显勾选
+- 如果某些 key 在当前数据集中不存在，会被自动忽略
 
 ## 使用示例
 

package/dist/cj_iview_table.common.js

@@ -25799,7 +25799,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=template&id=514a3b03&scoped=true
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/babel-loader/lib/index.js!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=template&id=6e06842e&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -36510,6 +36510,10 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       type: [String, Boolean],
       default: 'id'
     },
+    selectedRowKeys: {
+      type: Array,
+      default: () => []
+    },
     reserveSelection: {
       type: Boolean,
       default: false
@@ -36551,6 +36555,7 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       // 选中的数据
       selectionItems: [],
       reserveSelectionMap: {},
+      reserveSelectionKeys: [],
       isRestoringSelection: false,
       defToolBar: [{
         text: '新增',
@@ -36991,11 +36996,23 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
         this.queueRestoreSelection();
       }
     },
+    selectedRowKeys: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (this.shouldReserveSelection()) {
+          this.applySelectedRowKeys(newVal);
+        }
+      }
+    },
     requestParams() {
       this.reload();
     }
   },
   methods: {
+    normalizeRowKeyValue(value) {
+      return this.hasValidRowKey(value) ? String(value) : '';
+    },
     hasValidRowKey(value) {
       return value !== undefined && value !== null && value !== '';
     },
@@ -37010,9 +37027,47 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
     shouldReserveSelection() {
       return this.reserveSelection && this.columns.some(item => item.type === 'selection') && typeof this.rowKey === 'string' && this.rowKey !== '';
     },
-    setReserveSelectionMap(nextMap) {
-      this.reserveSelectionMap = nextMap;
-      this.selectionItems = Object.values(nextMap);
+    normalizeSelectedRowKeys(selectedRowKeys = []) {
+      if (!Array.isArray(selectedRowKeys)) {
+        return [];
+      }
+      return Array.from(new Set(selectedRowKeys.map(item => this.normalizeRowKeyValue(item)).filter(Boolean)));
+    },
+    setReserveSelectionState(nextMap = {}, nextKeys = []) {
+      const normalizedKeys = this.normalizeSelectedRowKeys(nextKeys);
+      const normalizedMap = normalizedKeys.reduce((result, key) => {
+        if (nextMap[key]) {
+          result[key] = nextMap[key];
+        }
+        return result;
+      }, {});
+      this.reserveSelectionMap = normalizedMap;
+      this.reserveSelectionKeys = normalizedKeys;
+      this.selectionItems = normalizedKeys.map(key => normalizedMap[key]).filter(Boolean);
+    },
+    applySelectedRowKeys(selectedRowKeys = []) {
+      if (!this.shouldReserveSelection()) {
+        return;
+      }
+      const normalizedKeys = this.normalizeSelectedRowKeys(selectedRowKeys);
+      const selectedKeySet = new Set(normalizedKeys);
+      const nextMap = normalizedKeys.reduce((result, key) => {
+        if (this.reserveSelectionMap[key]) {
+          result[key] = this.reserveSelectionMap[key];
+        }
+        return result;
+      }, {});
+      this.dataSource.forEach(row => {
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey && selectedKeySet.has(rowKey)) {
+          nextMap[rowKey] = row;
+        }
+      });
+      this.setReserveSelectionState(nextMap, normalizedKeys);
+      this.queueRestoreSelection();
+    },
+    getReserveSelectionKeys() {
+      return [...this.reserveSelectionKeys];
     },
     syncReserveSelection(selectionItems = []) {
       if (!this.shouldReserveSelection()) {
@@ -37022,23 +37077,26 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       const nextMap = {
         ...this.reserveSelectionMap
       };
+      const nextKeys = new Set(this.reserveSelectionKeys);
       const pageKeys = [];
       this.dataSource.forEach(row => {
-        const rowKey = this.getRowIdentity(row);
-        if (this.hasValidRowKey(rowKey)) {
-          pageKeys.push(String(rowKey));
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey) {
+          pageKeys.push(rowKey);
         }
       });
       pageKeys.forEach(key => {
         delete nextMap[key];
+        nextKeys.delete(key);
       });
       selectionItems.forEach(row => {
-        const rowKey = this.getRowIdentity(row);
-        if (this.hasValidRowKey(rowKey)) {
-          nextMap[String(rowKey)] = row;
+        const rowKey = this.normalizeRowKeyValue(this.getRowIdentity(row));
+        if (rowKey) {
+          nextMap[rowKey] = row;
+          nextKeys.add(rowKey);
         }
       });
-      this.setReserveSelectionMap(nextMap);
+      this.setReserveSelectionState(nextMap, Array.from(nextKeys));
     },
     getCurrentTableSelection() {
       const tableRef = this.$refs.selection;
@@ -37060,19 +37118,16 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       if (!tableRef || typeof tableRef.toggleSelect !== 'function') {
         return;
       }
-      const selectedKeys = new Set(Object.keys(this.reserveSelectionMap));
-      if (selectedKeys.size === 0) {
-        return;
-      }
+      const selectedKeys = new Set(this.reserveSelectionKeys);
       const currentSelection = this.getCurrentTableSelection();
-      const currentSelectionKeys = new Set(currentSelection.map(row => this.getRowIdentity(row)).filter(rowKey => this.hasValidRowKey(rowKey)).map(rowKey => String(rowKey)));
+      const currentSelectionKeys = new Set(currentSelection.map(row => this.getRowIdentity(row)).map(rowKey => this.normalizeRowKeyValue(rowKey)).filter(Boolean));
       this.isRestoringSelection = true;
       this.dataSource.forEach((row, index) => {
         const rowKey = this.getRowIdentity(row);
-        if (!this.hasValidRowKey(rowKey)) {
+        const normalizedKey = this.normalizeRowKeyValue(rowKey);
+        if (!normalizedKey) {
           return;
         }
-        const normalizedKey = String(rowKey);
         const shouldBeSelected = selectedKeys.has(normalizedKey);
         const isSelected = currentSelectionKeys.has(normalizedKey);
         if (shouldBeSelected !== isSelected) {
@@ -37084,14 +37139,17 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
       });
     },
     clearReserveSelection() {
-      this.setReserveSelectionMap({});
-      const selectedRowKeys = new Set(this.getCurrentTableSelection().map(row => this.getRowIdentity(row)).filter(rowKey => this.hasValidRowKey(rowKey)).map(rowKey => String(rowKey)));
+      this.setReserveSelectionState({}, []);
+      const selectedRowKeys = new Set(this.getCurrentTableSelection().map(row => this.getRowIdentity(row)).map(rowKey => this.normalizeRowKeyValue(rowKey)).filter(Boolean));
       this.dataSource.forEach((row, index) => {
         const rowKey = this.getRowIdentity(row);
-        if (this.hasValidRowKey(rowKey) && selectedRowKeys.has(String(rowKey)) && this.$refs.selection && typeof this.$refs.selection.toggleSelect === 'function') {
+        const normalizedKey = this.normalizeRowKeyValue(rowKey);
+        if (normalizedKey && selectedRowKeys.has(normalizedKey) && this.$refs.selection && typeof this.$refs.selection.toggleSelect === 'function') {
           this.$refs.selection.toggleSelect(index, rowKey);
         }
       });
+      this.$emit('on-reserve-selection-change', []);
+      this.$emit('on-reserve-selection-keys-change', []);
     },
     isJsonString(str) {
       if (typeof str !== 'string') return false;
@@ -37425,6 +37483,7 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
           return;
         }
         this.$emit('on-reserve-selection-change', this.selectionItems);
+        this.$emit('on-reserve-selection-keys-change', this.getReserveSelectionKeys());
       } else {
         this.selectionItems = selectionItems;
       }
@@ -38097,15 +38156,15 @@ var vue_treeselect_cjs_default = /*#__PURE__*/__webpack_require__.n(vue_treesele
 });
 ;// ./packages/components/index.vue?vue&type=script&lang=js
  /* harmony default export */ var packages_componentsvue_type_script_lang_js = (componentsvue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=0&id=514a3b03&prod&scoped=true&lang=less
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=0&id=6e06842e&prod&scoped=true&lang=less
 // extracted by mini-css-extract-plugin
 
-;// ./packages/components/index.vue?vue&type=style&index=0&id=514a3b03&prod&scoped=true&lang=less
+;// ./packages/components/index.vue?vue&type=style&index=0&id=6e06842e&prod&scoped=true&lang=less
 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=1&id=514a3b03&prod&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./packages/components/index.vue?vue&type=style&index=1&id=6e06842e&prod&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./packages/components/index.vue?vue&type=style&index=1&id=514a3b03&prod&lang=css
+;// ./packages/components/index.vue?vue&type=style&index=1&id=6e06842e&prod&lang=css
 
 ;// ./packages/components/index.vue
 
@@ -38123,7 +38182,7 @@ var components_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "514a3b03",
+  "6e06842e",
   null
   
 )