Table: add highlight current row example. (#903)

pull/911/head
FuryBean 2016-11-08 15:59:14 +08:00 committed by cinwell.li
parent ceea64d29b
commit 947b837ffa
1 changed files with 73 additions and 1 deletions

View File

@ -105,7 +105,7 @@
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}],
singleSelection: {},
currentRow: null,
multipleSelection: []
};
},
@ -115,6 +115,10 @@
this.multipleSelection = val;
},
handleCurrentChange(val) {
this.currentRow = val;
},
formatter(row, column) {
return row.address;
},
@ -669,6 +673,74 @@
```
:::
### 单选
选择单行数据时使用色块表示。
:::demo Table 组件提供了单选的支持,只需要配置`highlight-current-row`属性即可实现单选。之后由`current-change`事件来管理选中时触发的事件,它会传入`currentRow``oldCurrentRow`。如果需要显示索引,可以增加一列`el-table-column`,设置`type`属性为`index`即可显示从 1 开始的索引号。
```html
<template>
<el-table
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
property="date"
label="日期"
width="120">
</el-table-column>
<el-table-column
property="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
property="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 弄'
}],
currentRow: null
}
},
methods: {
handleCurrentChange(val) {
this.currentRow = val;
}
}
}
</script>
```
:::
### 多选
选择多行数据时使用 Checkbox。