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