学习 Table Demo

src/App.vue

@@ -9,6 +9,8 @@
     <router-link :to="{name:'table7'}">Table Demo 7: 多级表头</router-link><br>
     <router-link :to="{name:'table8'}">Table Demo 8: 合并行列</router-link><br>
     <router-link :to="{name:'table9'}">Table Demo 9: 带状态的行</router-link><br>
+    <router-link :to="{name:'table10'}">Table Demo 10: 单行选择</router-link><br>
+    <router-link :to="{name:'table11'}">Table Demo 11: 多行选择</router-link><br>
   </div>
   <div>
     <router-view></router-view>

src/router/index.js

@@ -11,6 +11,8 @@ const tableDemo6 = () => import('../views/Table_Demo6.vue')
 const tableDemo7 = () => import('../views/Table_Demo7.vue')
 const tableDemo8 = () => import('../views/Table_Demo8.vue')
 const tableDemo9 = () => import('../views/Table_Demo9.vue')
+const tableDemo10 = () => import('../views/Table_Demo10.vue')
+const tableDemo11 = () => import('../views/Table_Demo11.vue')
 
 // 引入组件
 
@@ -67,6 +69,16 @@ const routes = [
         name: 'table9',
         component: tableDemo9
     },
+    {
+        path: '/table10',
+        name: 'table10',
+        component: tableDemo10
+    },
+    {
+        path: '/table11',
+        name: 'table11',
+        component: tableDemo11
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Table_Demo10.vue

@@ -0,0 +1,56 @@
+<template>
+<el-table ref="myTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange">
+  <el-table-column prop="date" label="Date"></el-table-column>
+  <el-table-column prop="name" label="Name"></el-table-column>
+  <el-table-column prop="address" label="Address"></el-table-column>
+</el-table>
+<div>
+  <el-button @click="selectRow(tableData[1])">选中第二行</el-button>
+  <el-button @click="selectRow()">清除选中行</el-button>
+</div>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo10",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-04",
+          name: "Tom1",
+          address: "No. 1891, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-05",
+          name: "Tom2",
+          address: "No. 1892, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-06",
+          name: "Tom3",
+          address: "No. 1893, Grove St, Los Angeles"
+        },
+      ]
+    }
+  },
+  methods: {
+    handleCurrentChange(currentRow, oldCurrentRow) {
+      console.log(currentRow)
+      console.log(oldCurrentRow)
+    },
+    selectRow(row) {
+      this.$refs.myTable.setCurrentRow(row);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Table_Demo11.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-table ref="myTable" :data="tableData" @selection-change="handleSelectChange">
+    <el-table-column type="selection"></el-table-column>
+    <el-table-column prop="date" label="Date"></el-table-column>
+    <el-table-column prop="name" label="Name"></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
+  </el-table>
+  <br>
+  <div>
+    <el-button @click="selectRows([tableData[1], tableData[3]])">选中第2行和第4行</el-button>
+    <el-button @click="selectRows()">选中第2行和第4行</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo11",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "Tom",
+          address: "No. 189, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-04",
+          name: "Tom1",
+          address: "No. 1891, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-05",
+          name: "Tom2",
+          address: "No. 1892, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-06",
+          name: "Tom3",
+          address: "No. 1893, Grove St, Los Angeles"
+        },
+      ]
+    }
+  },
+  methods: {
+    selectRows(rows) {
+      if (rows) {
+        rows.forEach((row)=>{
+          this.$refs.myTable.toggleRowSelection(row);
+        })
+      }else{
+        this.$refs.myTable.clearSelection();
+      }
+    },
+    handleSelectChange(selectRows) {
+      console.log(selectRows)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>