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 |
|
||||
| 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 | — | — |
|
||||
|
|
|
@ -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 | — | — |
|
||||
|
|
|
@ -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 |
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
Loading…
Reference in New Issue