Эх сурвалжийг харах

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

FuryBean 8 жил өмнө
parent
commit
947b837ffa

+ 73 - 1
examples/docs/zh-CN/table.md

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