From 55ea6412dcee7b44eb81784549b5c92c7da6d28e Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 26 Sep 2023 19:00:37 +0800
Subject: [PATCH] =?UTF-8?q?el-table=E7=BB=83=E4=B9=A0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue               |  6 +++-
 src/router/index.js       | 25 +++++++++++++-
 src/views/Table_Demo1.vue | 27 ++++++++++------
 src/views/Table_Demo2.vue | 35 ++++++++++++++++++++
 src/views/Table_Demo3.vue | 43 +++++++++++++++++++++++++
 src/views/Table_Demo4.vue | 68 +++++++++++++++++++++++++++++++++++++++
 src/views/Table_Demo5.vue | 58 +++++++++++++++++++++++++++++++++
 7 files changed, 250 insertions(+), 12 deletions(-)
 create mode 100644 src/views/Table_Demo2.vue
 create mode 100644 src/views/Table_Demo3.vue
 create mode 100644 src/views/Table_Demo4.vue
 create mode 100644 src/views/Table_Demo5.vue

diff --git a/src/App.vue b/src/App.vue
index 354cb24..f12037f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <router-link :to="{name:'table1'}">Table Demo 1</router-link>
+    <router-link :to="{name:'table1'}">Table Demo 1: 基本表格</router-link><br>
+    <router-link :to="{name:'table2'}">Table Demo 2: 斑马线路由</router-link><br>
+    <router-link :to="{name:'table3'}">Table Demo 3: 带边框的路由</router-link><br>
+    <router-link :to="{name:'table4'}">Table Demo 4: 自定义样式</router-link><br>
+    <router-link :to="{name:'table5'}">Table Demo 5: 滚动条</router-link><br>
   </div>
   <div>
     <router-view></router-view>
diff --git a/src/router/index.js b/src/router/index.js
index 03e92fe..a80e67d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,7 +3,10 @@ import {createRouter, createWebHistory} from 'vue-router'
 // 引入视图
 // const root = () => import('../App.vue')
 const tableDemo1 = () => import('../views/Table_Demo1.vue')
-
+const tableDemo2 = () => import('../views/Table_Demo2.vue')
+const tableDemo3 = () => import('../views/Table_Demo3.vue')
+const tableDemo4 = () => import('../views/Table_Demo4.vue')
+const tableDemo5 = () => import('../views/Table_Demo5.vue')
 
 // 引入组件
 
@@ -20,6 +23,26 @@ const routes = [
         name: 'table1',
         component: tableDemo1
     },
+    {
+        path: '/table2',
+        name: 'table2',
+        component: tableDemo2
+    },
+    {
+        path: '/table3',
+        name: 'table3',
+        component: tableDemo3
+    },
+    {
+        path: '/table4',
+        name: 'table4',
+        component: tableDemo4
+    },
+    {
+        path: '/table5',
+        name: 'table5',
+        component: tableDemo5
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
diff --git a/src/views/Table_Demo1.vue b/src/views/Table_Demo1.vue
index 8808227..4178907 100644
--- a/src/views/Table_Demo1.vue
+++ b/src/views/Table_Demo1.vue
@@ -2,7 +2,7 @@
   <el-table :data="tableData">
     <el-table-column prop="date" label="Date" width="180"></el-table-column>
     <el-table-column prop="name" label="Name" width="180"></el-table-column>
-    <el-table-column prop="address" label="Address" ></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
   </el-table>
 </template>
 
@@ -12,21 +12,28 @@ export default {
   data() {
     return {
       tableData: [
-        { date: "2016-05-03",
+        {
+          date: "2016-05-03",
           name: "Tom",
-          address: "No. 189, Grove St, Los Angeles"},
-        { date: "2016-05-04",
+          address: "No. 189, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-04",
           name: "Tom1",
-          address: "No. 1891, Grove St, Los Angeles"},
-        { date: "2016-05-05",
+          address: "No. 1891, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-05",
           name: "Tom2",
-          address: "No. 1892, Grove St, Los Angeles"},
-        { date: "2016-05-06",
+          address: "No. 1892, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-06",
           name: "Tom3",
-          address: "No. 1893, Grove St, Los Angeles"},
+          address: "No. 1893, Grove St, Los Angeles"
+        },
       ]
     }
-
   },
 }
 </script>
diff --git a/src/views/Table_Demo2.vue b/src/views/Table_Demo2.vue
new file mode 100644
index 0000000..90fe183
--- /dev/null
+++ b/src/views/Table_Demo2.vue
@@ -0,0 +1,35 @@
+<template>
+  <el-table :data="tableData" stripe>
+    <el-table-column prop="date" label="Date" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="180"></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo2",
+  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"},
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Table_Demo3.vue b/src/views/Table_Demo3.vue
new file mode 100644
index 0000000..1652f15
--- /dev/null
+++ b/src/views/Table_Demo3.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-table :data="tableData" border>
+    <el-table-column prop="date" label="Date" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="180"></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "table_Demo3",
+  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"
+        },
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Table_Demo4.vue b/src/views/Table_Demo4.vue
new file mode 100644
index 0000000..6a3d746
--- /dev/null
+++ b/src/views/Table_Demo4.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="date" label="Date" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="180">
+      <template #default="scope">
+        <div class="name-wrapper">
+          <el-tag size="small">{{ scope.row.name }}</el-tag>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column>
+      <template #header>
+        <el-input v-model="search" size="small" placeholder="Type to search"></el-input>
+      </template>
+      <template #default="{$index, row}">
+        <el-button size="small" @click="handleEdit($index, row)">Edit</el-button>
+        <el-button size="small" @click="handleDelete($index, row)" type="danger">Delete</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+
+<script>
+export default {
+  name: "Table_Demo4",
+  data() {
+    return {
+      search: "",
+      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: {
+    handleEdit: (index, row)=>{
+      console.log(index, row);
+    },
+    handleDelete: (index, row)=>{
+      console.log(index, row);
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>
diff --git a/src/views/Table_Demo5.vue b/src/views/Table_Demo5.vue
new file mode 100644
index 0000000..e951128
--- /dev/null
+++ b/src/views/Table_Demo5.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-table :data="tableData" height="200" scrollbar-always-on>
+    <el-table-column prop="date" label="Date" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="180"></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo5",
+  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"
+        },
+        {
+          date: "2016-05-06",
+          name: "Tom4",
+          address: "No. 1893, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-06",
+          name: "Tom5",
+          address: "No. 1893, Grove St, Los Angeles"
+        },
+        {
+          date: "2016-05-06",
+          name: "Tom6",
+          address: "No. 1893, Grove St, Los Angeles"
+        },
+      ]
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>