Table: add current-row-key prop.

pull/2053/head
Furybean 2016-12-28 15:30:06 +08:00 committed by 杨奕
parent d26288ea30
commit 191c8ab3d1
6 changed files with 58 additions and 1 deletions

View File

@ -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 | — | — |

View File

@ -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 | — | — |

View File

@ -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 |

View File

@ -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;

View File

@ -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) {

View File

@ -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', () => {