diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 7f7a4e5f6..cad6207e9 100644 --- a/examples/docs/en-US/table.md +++ b/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 | — | — | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 0e1acd305..489fdb9cd 100644 --- a/examples/docs/zh-CN/table.md +++ b/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 | — | — | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index 80af4d9d6..470e0f2c0 100644 --- a/examples/docs/zh-CN/tree.md +++ b/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 | diff --git a/packages/table/src/table-store.js b/packages/table/src/table-store.js index 001d46d6b..abd970ee3 100644 --- a/packages/table/src/table-store.js +++ b/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; diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 2ca1dfc74..adbeb6645 100644 --- a/packages/table/src/table.vue +++ b/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) { diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index 23525ea9e..a81deeba2 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -188,6 +188,43 @@ describe('Table', () => { done(); }, DELAY); }); + + it('current-row-key', done => { + const vm = createVue({ + template: ` + + + + + + + `, + + 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', () => {