Bladeren bron

Table: add current-row-key prop.

Furybean 8 jaren geleden
bovenliggende
commit
191c8ab3d1

+ 1 - 0
examples/docs/en-US/table.md

@@ -1445,6 +1445,7 @@ When the row content is too long and you do not want to display the horizontal s
 | fit | whether width of column automatically fits its container | boolean | — | true |
 | show-header | whether table header is visible | boolean | - | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
+| current-row-key | key of current row, a set only prop | string,number | - | - |
 | row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
 | row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function(row, index)/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |

+ 1 - 0
examples/docs/zh-CN/table.md

@@ -1438,6 +1438,7 @@
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | - | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
+| current-row-key | 当前行的 key,只写属性 | String,Number | - | - |
 | row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
 | row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
 | row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的 | Function(row)/String | — | — |

+ 1 - 1
examples/docs/zh-CN/tree.md

@@ -236,7 +236,7 @@
 | load | 加载子树数据的方法 | function(node, resolve) | — | — |
 | render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
 | highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false |
-| current-node-key | 当前选中节点的 key,是一个只写属性 | string, number | - | - |
+| current-node-key | 当前选中节点的 key,只写属性 | string, number | - | - |
 | default-expand-all | 是否默认展开所有节点 | boolean | - | false |
 | expand-on-click-node | 是否在点击节点的时候展开或者收缩节点,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
 | auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |

+ 12 - 0
packages/table/src/table-store.js

@@ -428,6 +428,18 @@ TableStore.prototype.scheduleLayout = function() {
   this.table.debouncedLayout();
 };
 
+TableStore.prototype.setCurrentRowKey = function(key) {
+  const states = this.states;
+  const rowKey = states.rowKey;
+  if (!rowKey) throw new Error('[Table] row-key should not be empty.');
+  const data = states.data || [];
+  const keysMap = getKeysMap(data, rowKey);
+  const info = keysMap[key];
+  if (info) {
+    states.currentRow = info.row;
+  }
+};
+
 TableStore.prototype.updateCurrentRow = function() {
   const states = this.states;
   const table = this.table;

+ 6 - 0
packages/table/src/table.vue

@@ -164,6 +164,8 @@
 
       highlightCurrentRow: Boolean,
 
+      currentRowKey: [String, Number],
+
       emptyText: String,
 
       expandRowKeys: Array,
@@ -355,6 +357,10 @@
         this.layout.setHeight(value);
       },
 
+      currentRowKey(newVal) {
+        this.store.setCurrentRowKey(newVal);
+      },
+
       data: {
         immediate: true,
         handler(val) {

+ 37 - 0
test/unit/specs/table.spec.js

@@ -188,6 +188,43 @@ describe('Table', () => {
         done();
       }, DELAY);
     });
+
+    it('current-row-key', done => {
+      const vm = createVue({
+        template: `
+        <el-table :data="testData" row-key="id" highlight-current-row :current-row-key="currentRowKey">
+          <el-table-column prop="name" label="片名" />
+          <el-table-column prop="release" label="发行日期" />
+          <el-table-column prop="director" label="导演" />
+          <el-table-column prop="runtime" label="时长(分)" />
+        </el-table>
+      `,
+
+        created() {
+          this.testData = getTestData();
+        },
+
+        data() {
+          return { currentRowKey: null };
+        }
+      }, true);
+      setTimeout(_ => {
+        vm.currentRowKey = 1;
+        const tr = vm.$el.querySelector('.el-table__body-wrapper tbody tr');
+        setTimeout(_ => {
+          expect(tr.classList.contains('current-row')).to.be.true;
+          vm.currentRowKey = 2;
+
+          const rows = vm.$el.querySelectorAll('.el-table__body-wrapper tbody tr');
+          setTimeout(_ => {
+            expect(tr.classList.contains('current-row')).to.be.false;
+            expect(rows[1].classList.contains('current-row')).to.be.true;
+            destroyVM(vm);
+            done();
+          }, DELAY);
+        }, DELAY);
+      }, DELAY);
+    });
   });
 
   describe('filter', () => {