学习 Table Demo

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <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:'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>
     <router-link :to="{name:'table6'}">Table Demo 6: 固定列</router-link><br>
@@ -11,11 +11,14 @@
     <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>
+    <router-link :to="{name:'table12'}">Table Demo 12: 排序</router-link><br>
+    <router-link :to="{name:'table13'}">Table Demo 13: 筛选</router-link><br>
+    <router-link :to="{name:'table14'}">Table Demo 14: 展开行</router-link><br>
+    <router-link :to="{name:'table15'}">Table Demo 15: 树形数据</router-link><br>
   </div>
   <div>
     <router-view></router-view>
-  </div>
-</template>
+  </div></template>
 <script setup>
 
 </script>

src/router/index.js

@@ -13,6 +13,10 @@ 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')
+const tableDemo12 = () => import('../views/Table_Demo12.vue')
+const tableDemo13 = () => import('../views/Table_Demo13.vue')
+const tableDemo14 = () => import('../views/Table_Demo14.vue')
+const tableDemo15 = () => import('../views/Table_Demo15.vue')
 
 // 引入组件
 
@@ -79,6 +83,26 @@ const routes = [
         name: 'table11',
         component: tableDemo11
     },
+    {
+        path: '/table12',
+        name: 'table12',
+        component: tableDemo12
+    },
+    {
+        path: '/table13',
+        name: 'table13',
+        component: tableDemo13
+    },
+    {
+        path: '/table14',
+        name: 'table14',
+        component: tableDemo14
+    },
+    {
+        path: '/table25',
+        name: 'table15',
+        component: tableDemo15
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Table_Demo12.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-table :data="tableData" :default-sort="{prop:'date',order: 'descending'}" >
+    <el-table-column prop="date" label="Date" sortable></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>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo12",
+  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_Demo13.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-table :data="tableData">
+    <el-table-column prop="date" label="Date"></el-table-column>
+    <el-table-column prop="name" label="Name" :filters="filters" :filter-method="filter_methods"></el-table-column>
+    <el-table-column prop="address" label="Address"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo13",
+  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"
+        },
+      ],
+      filters: [
+        {text: "Tom", value: "Tom"},
+        {text: "Tom1", value: "Tom1"},
+        {text: "Tom2", value: "Tom2"},
+        {text: "Tom3", value: "Tom3"}
+      ]
+    }
+  },
+  methods: {
+    filter_methods(value, row, column) {
+      console.log('filter')
+      console.log(row)
+      console.log(column)
+      const property = column['property']
+      console.log(property)
+      console.log(value)
+      console.log(row[property])
+      return row[property] === value
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>

src/views/Table_Demo14.vue

@@ -0,0 +1,257 @@
+<template>
+<el-table :data="tableData">
+  <el-table-column type="expand">
+    <template #default="props">
+      <div>
+        <p>State: {{ props.row.state}}</p>
+        <p>City: {{ props.row.city}}</p>
+        <p>Address: {{ props.row.address}}</p>
+        <p>Zip: {{ props.row.zip}}</p>
+        <h3>Family</h3>
+        <el-table :data="props.row.family">
+          <el-table-column prop="name" label="Name"></el-table-column>
+          <el-table-column prop="state" label="State"></el-table-column>
+          <el-table-column prop="city" label="City"></el-table-column>
+          <el-table-column prop="address" label="Address"></el-table-column>
+          <el-table-column prop="zip" label="Zip"></el-table-column>
+        </el-table>
+      </div>
+    </template>
+  </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>
+</template>
+
+<script>
+export default {
+  name: "TableDemo14",
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-08',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-06',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+        {
+          date: '2016-05-07',
+          name: 'Tom',
+          state: 'California',
+          city: 'San Francisco',
+          address: '3650 21st St, San Francisco',
+          zip: 'CA 94114',
+          family: [
+            {
+              name: 'Jerry',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Spike',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+            {
+              name: 'Tyke',
+              state: 'California',
+              city: 'San Francisco',
+              address: '3650 21st St, San Francisco',
+              zip: 'CA 94114',
+            },
+          ],
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Table_Demo15.vue

@@ -0,0 +1,62 @@
+<template>
+<el-table :data="tableData" row-key="id" default-expand-all>
+  <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>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo15",
+  data() {
+    return {
+      tableData: [
+        {
+          id: 1,
+          date: '2016-05-02',
+          name: 'wangxiaohu',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+          id: 2,
+          date: '2016-05-04',
+          name: 'wangxiaohu',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+        {
+          id: 3,
+          date: '2016-05-01',
+          name: 'wangxiaohu',
+          address: 'No. 189, Grove St, Los Angeles',
+          children: [
+            {
+              id: 31,
+              date: '2016-05-01',
+              name: 'wangxiaohu',
+              address: 'No. 189, Grove St, Los Angeles',
+            },
+            {
+              id: 32,
+              date: '2016-05-01',
+              name: 'wangxiaohu',
+              address: 'No. 189, Grove St, Los Angeles',
+            },
+          ],
+        },
+        {
+          id: 4,
+          date: '2016-05-03',
+          name: 'wangxiaohu',
+          address: 'No. 189, Grove St, Los Angeles',
+        },
+      ]
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>