mirror of https://github.com/ElemeFE/element
Table: add current-row-key prop.
parent
d26288ea30
commit
191c8ab3d1
|
@ -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 |
|
| fit | whether width of column automatically fits its container | boolean | — | true |
|
||||||
| show-header | whether table header is visible | boolean | - | true |
|
| show-header | whether table header is visible | boolean | - | true |
|
||||||
| highlight-current-row | whether current row is highlighted | boolean | — | false |
|
| 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-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-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 | — | — |
|
| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
|
||||||
|
|
|
@ -1438,6 +1438,7 @@
|
||||||
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
| fit | 列的宽度是否自撑开 | boolean | — | true |
|
||||||
| show-header | 是否显示表头 | boolean | - | true |
|
| show-header | 是否显示表头 | boolean | - | true |
|
||||||
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
|
||||||
|
| current-row-key | 当前行的 key,只写属性 | String,Number | - | - |
|
||||||
| row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
|
| row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
|
||||||
| row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
|
| row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
|
||||||
| row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的 | Function(row)/String | — | — |
|
| row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的 | Function(row)/String | — | — |
|
||||||
|
|
|
@ -236,7 +236,7 @@
|
||||||
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
|
| load | 加载子树数据的方法 | function(node, resolve) | — | — |
|
||||||
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
|
| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
|
||||||
| highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false |
|
| highlight-current | 是否高亮当前选中节点,默认值是 false。| boolean | - | false |
|
||||||
| current-node-key | 当前选中节点的 key,是一个只写属性 | string, number | - | - |
|
| current-node-key | 当前选中节点的 key,只写属性 | string, number | - | - |
|
||||||
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
|
| default-expand-all | 是否默认展开所有节点 | boolean | - | false |
|
||||||
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
|
| expand-on-click-node | 是否在点击节点的时候展开或者收缩节点,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 | boolean | - | false |
|
||||||
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
|
||||||
|
|
|
@ -428,6 +428,18 @@ TableStore.prototype.scheduleLayout = function() {
|
||||||
this.table.debouncedLayout();
|
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() {
|
TableStore.prototype.updateCurrentRow = function() {
|
||||||
const states = this.states;
|
const states = this.states;
|
||||||
const table = this.table;
|
const table = this.table;
|
||||||
|
|
|
@ -164,6 +164,8 @@
|
||||||
|
|
||||||
highlightCurrentRow: Boolean,
|
highlightCurrentRow: Boolean,
|
||||||
|
|
||||||
|
currentRowKey: [String, Number],
|
||||||
|
|
||||||
emptyText: String,
|
emptyText: String,
|
||||||
|
|
||||||
expandRowKeys: Array,
|
expandRowKeys: Array,
|
||||||
|
@ -355,6 +357,10 @@
|
||||||
this.layout.setHeight(value);
|
this.layout.setHeight(value);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
currentRowKey(newVal) {
|
||||||
|
this.store.setCurrentRowKey(newVal);
|
||||||
|
},
|
||||||
|
|
||||||
data: {
|
data: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(val) {
|
handler(val) {
|
||||||
|
|
|
@ -188,6 +188,43 @@ describe('Table', () => {
|
||||||
done();
|
done();
|
||||||
}, DELAY);
|
}, 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', () => {
|
describe('filter', () => {
|
||||||
|
|
Loading…
Reference in New Issue