mirror of https://github.com/ElemeFE/element
Table: add highlight current row example. (#903)
parent
ceea64d29b
commit
947b837ffa
|
@ -105,7 +105,7 @@
|
||||||
address: '上海市普陀区金沙江路 1518 弄',
|
address: '上海市普陀区金沙江路 1518 弄',
|
||||||
zip: 200333
|
zip: 200333
|
||||||
}],
|
}],
|
||||||
singleSelection: {},
|
currentRow: null,
|
||||||
multipleSelection: []
|
multipleSelection: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -115,6 +115,10 @@
|
||||||
this.multipleSelection = val;
|
this.multipleSelection = val;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.currentRow = val;
|
||||||
|
},
|
||||||
|
|
||||||
formatter(row, column) {
|
formatter(row, column) {
|
||||||
return row.address;
|
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。
|
选择多行数据时使用 Checkbox。
|
||||||
|
|
Loading…
Reference in New Issue