mirror of https://github.com/ElemeFE/element
Table: add highlight current row example. (#903)
parent
ceea64d29b
commit
947b837ffa
|
@ -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。
|
||||
|
|
Loading…
Reference in New Issue