el-table练习代码

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>

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

src/views/Table_Demo1.vue

@@ -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"},
+          address: "No. 189, Grove St, Los Angeles"
-        { date: "2016-05-04",
+        },
+        {
+          date: "2016-05-04",
           name: "Tom1",
-          address: "No. 1891, Grove St, Los Angeles"},
+          address: "No. 1891, Grove St, Los Angeles"
-        { date: "2016-05-05",
+        },
+        {
+          date: "2016-05-05",
           name: "Tom2",
-          address: "No. 1892, Grove St, Los Angeles"},
+          address: "No. 1892, Grove St, Los Angeles"
-        { date: "2016-05-06",
+        },
+        {
+          date: "2016-05-06",
           name: "Tom3",
-          address: "No. 1893, Grove St, Los Angeles"},
+          address: "No. 1893, Grove St, Los Angeles"
+        },
       ]
     }
-
   },
 }
 </script>

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>

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>

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>

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>