[Table] Remove prop: selectionMode & allowNoCurrentRow

This commit is contained in:
furybean 2016-10-21 16:35:28 +08:00
parent 92bd227512
commit f8fdf35bbb
4 changed files with 3 additions and 124 deletions

View File

@ -666,85 +666,15 @@
```
:::
### 单选
选择单行数据时使用色块表示。
:::demo Table 组件提供了选择的支持,只需要配置`selection-mode`属性即可实现单选(`single`)、多选(`multiple`),如果不需要则设置为`none`。之后由`selection-change`事件来管理选中时触发的事件,它会传入一个`value``value`为生成表格时的对应对象。本例中还使用了`allow-no-current-row`属性,它接受一个`Boolean`,若为`true`,则允许为空,默认为`false`,此时将会产生默认值,为填入数组的第一个对象。如果需要显示索引,可以增加一列`el-table-column`,设置`type`属性为`index`即可显示从 1 开始的索引号。
```html
<template>
<el-table
:data="tableData"
selection-mode="single"
@selection-change="handleSelectionChange"
style="width: 100%"
allow-no-current-row>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
singleSelection: {}
}
},
methods: {
handleSelectionChange(val) {
this.singleSelection = val;
}
}
}
</script>
```
:::
### 多选
选择多行数据时使用 Checkbox。
:::demo 除了`selection-mode`的设置外,多选与单选并没有太大差别,只是传入`selection-change`事件中的参数从对象变成了对象数组。此外,需要提供一个列来显示多选框: 手动添加一个`el-table-column`,设`type`属性为`selection`即可。在本例中,为了方便说明其他属性,我们还使用了`inline-template`和`show-tooltip-when-overflow`:设置了`inline-template`属性后,可以通过调用`row`对象中的值取代`prop`属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用`show-tooltip-when-overflow`属性,它接受一个`Boolean`,为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
:::demo 实现多选非常简单: 手动添加一个`el-table-column`,设`type`属性为`selection`即可。在本例中,为了方便说明其他属性,我们还使用了`inline-template`和`show-tooltip-when-overflow`:设置了`inline-template`属性后,可以通过调用`row`对象中的值取代`prop`属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用`show-tooltip-when-overflow`属性,它接受一个`Boolean`,为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。
```html
<template>
<el-table
:data="tableData3"
selection-mode="multiple"
style="width: 100%"
@selection-change="handleMultipleSelectionChange">
<el-table-column
@ -890,8 +820,6 @@
| fit | 列的宽度是否自撑开 | boolean | — | true |
| row-class-name | 行的 className 的回调,会传入 row, index。 | Function | - | - |
| row-key | 行数据的 Key用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的 | Function, String | - | |
| selection-mode | 列表项选择模式 | string | single/multiple/none | none |
| allow-no-current-row | 单选模式是否允许选项为空 | boolean | — | false |
### Table Events
| 事件名 | 说明 | 参数 |

View File

@ -166,8 +166,6 @@ export default {
}
}
this.store.commit('setSelectedRow', row);
table.$emit('row-click', row, event);
},

View File

@ -33,8 +33,6 @@ const TableStore = function(table, initialState = {}) {
isAllSelected: false,
selection: [],
reserveSelection: false,
allowNoCurrentRow: false,
selectionMode: 'none',
selectable: null,
currentRow: null,
hoverRow: null
@ -54,7 +52,6 @@ TableStore.prototype.mutations = {
data.forEach((item) => Vue.set(item, '$selected', false));
}
states.data = orderBy((data || []), states.sortCondition.property, states.sortCondition.direction);
this.updateCurrentRow();
if (!states.reserveSelection) {
states.isAllSelected = false;
@ -175,13 +172,7 @@ TableStore.prototype.mutations = {
}
this.table.$emit('select-all', selection);
states.isAllSelected = value;
}),
setSelectedRow(states, row) {
if (states.selectionMode === 'single') {
states.currentRow = row;
}
}
})
};
TableStore.prototype.updateColumns = function() {
@ -230,30 +221,6 @@ TableStore.prototype.updateAllSelected = function() {
states.isAllSelected = isAllSelected;
};
TableStore.prototype.updateCurrentRow = function() {
const states = this.states;
const table = this.table;
const data = states.data || [];
if (states.selectionMode === 'single') {
const oldCurrentRow = states.currentRow;
if (oldCurrentRow === null && !states.allowNoCurrentRow) {
states.currentRow = data[0];
if (states.currentRow !== oldCurrentRow) {
table.$emit('selection-change', states.currentRow);
}
} else if (data.indexOf(oldCurrentRow) === -1) {
if (!states.allowNoCurrentRow) {
states.currentRow = data[0];
} else {
states.currentRow = null;
}
if (states.currentRow !== oldCurrentRow) {
table.$emit('selection-change', states.currentRow);
}
}
}
};
TableStore.prototype.scheduleLayout = function() {
this.table.debouncedLayout();
};

View File

@ -118,15 +118,8 @@
border: Boolean,
selectionMode: {
type: String,
default: 'none'
},
rowKey: [String, Function],
allowNoCurrentRow: Boolean,
rowClassName: [String, Function]
},
@ -197,12 +190,7 @@
},
selection() {
if (this.selectionMode === 'multiple') {
return this.store.selection;
} else if (this.selectionMode === 'single') {
return this.store.currentRow;
}
return null;
return this.store.selection;
},
columns() {
@ -248,8 +236,6 @@
data() {
const store = new TableStore(this, {
allowNoCurrentRow: this.allowNoCurrentRow,
selectionMode: this.selectionMode,
rowKey: this.rowKey
});
const layout = new TableLayout({