From 91a00e808971def70187b7b66f043b2f1dbd83b8 Mon Sep 17 00:00:00 2001
From: roger_home_pc <roger_sun@outlook.com>
Date: Tue, 3 Oct 2023 14:59:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=20Table=20Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  2 ++
 src/router/index.js        | 12 ++++++++
 src/views/Table_Demo10.vue | 56 +++++++++++++++++++++++++++++++++
 src/views/Table_Demo11.vue | 63 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 133 insertions(+)
 create mode 100644 src/views/Table_Demo10.vue
 create mode 100644 src/views/Table_Demo11.vue

diff --git a/src/App.vue b/src/App.vue
index 2391a68..7a03e22 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index e4c7e7e..757402d 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/views/Table_Demo10.vue b/src/views/Table_Demo10.vue
new file mode 100644
index 0000000..1ae1b8c
--- /dev/null
+++ b/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>
diff --git a/src/views/Table_Demo11.vue b/src/views/Table_Demo11.vue
new file mode 100644
index 0000000..c26f3a9
--- /dev/null
+++ b/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>