el-table练习代码

src/App.vue

@@ -5,6 +5,10 @@
     <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>
+    <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>
   </div>
   <div>
     <router-view></router-view>

src/router/index.js

@@ -7,6 +7,10 @@ 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')
+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')
 
 // 引入组件
 
@@ -43,6 +47,26 @@ const routes = [
         name: 'table5',
         component: tableDemo5
     },
+    {
+        path: '/table6',
+        name: 'table6',
+        component: tableDemo6
+    },
+    {
+        path: '/table7',
+        name: 'table7',
+        component: tableDemo7
+    },
+    {
+        path: '/table8',
+        name: 'table8',
+        component: tableDemo8
+    },
+    {
+        path: '/table9',
+        name: 'table9',
+        component: tableDemo9
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Table_Demo6.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-table :data="tableData" style="width: 80%;">
+    <el-table-column prop="date" label="Date" fixed width="180"></el-table-column>
+    <el-table-column prop="name" label="Name" width="2500"></el-table-column>
+    <el-table-column prop="address" label="Address" fixed="right" width="300"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo6",
+  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_Demo7.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-table :data="tableData" >
+    <el-table-column prop="date" label="Date" width="150"></el-table-column>
+    <el-table-column label="Delivery info">
+      <el-table-column prop="name" label="Name" width="150"></el-table-column>
+      <el-table-column label="Address info">
+        <el-table-column prop="state" label="State" width="150"></el-table-column>
+        <el-table-column prop="city" label="City" width="150"></el-table-column>
+        <el-table-column prop="address" label="Address" width="300"></el-table-column>
+        <el-table-column prop="zip" label="Zip" width="150"></el-table-column>
+      </el-table-column>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: "Table_Demo7",
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home',
+        },
+        {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+        {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home',
+        },
+        {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office',
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Table_Demo8.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-table :data="tableData" :span-method="arraySpanMethod" border>
+    <el-table-column prop="id" label="ID" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name"></el-table-column>
+    <el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
+    <el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
+    <el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
+  </el-table>
+  <br>
+  <el-table :data="tableData" :span-method="objectSpanMethod" border>
+    <el-table-column prop="id" label="ID" width="180"></el-table-column>
+    <el-table-column prop="name" label="Name"></el-table-column>
+    <el-table-column prop="amount1" sortable label="Amount1"></el-table-column>
+    <el-table-column prop="amount2" sortable label="Amount2"></el-table-column>
+    <el-table-column prop="amount3" sortable label="Amount3"></el-table-column>
+  </el-table>
+</template>
+<script>
+export default {
+  name: "Table_Demo8",
+  data() {
+    return {
+      tableData: [
+        {
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10,
+        },
+        {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12,
+        },
+        {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9,
+        },
+        {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17,
+        },
+        {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15,
+        },
+      ]
+    }
+  },
+  methods: {
+    arraySpanMethod({row, column, rowIndex, columnIndex}) {
+      if (rowIndex % 2 === 0) {
+        if (columnIndex === 0) {
+          return [1, 2]  // columnIndex === 0 表示第一列，[1, 2] 1代表行不合并，2代表列占用2列
+        } else if (columnIndex === 1) {
+          return [0, 0]  // 由于第一列占用了两列，所以第二列的内容需要设置为[0,0]就不会占空间了
+        }
+      }
+    },
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 0) {
+        if (rowIndex % 2 === 0) {
+          return [2, 1]
+        } else if (rowIndex % 2 === 1) {
+          return [0, 0]
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Table_Demo9.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-table :data="tableData" :row-class-name="rowClassMethod">
+    <el-table-column prop="id" label="Id"></el-table-column>
+    <el-table-column prop="name" label="Name"></el-table-column>
+    <el-table-column prop="score" label="Score"></el-table-column>
+  </el-table>
+</template>
+
+<script>
+
+export default {
+  name: "Table_Demo9",
+  data() {
+    return {
+      tableData: [
+        {
+          id: '12987122',
+          name: 'Tom',
+          score: '99'
+        },
+        {
+          id: '12987123',
+          name: 'black',
+          score: '81'
+        },
+        {
+          id: '12987124',
+          name: 'harry',
+          score: '70'
+        },
+        {
+          id: '12987125',
+          name: 'Jerry',
+          score: '58'
+        }
+      ]
+    }
+  },
+  methods: {
+    rowClassMethod(e) {
+      console.log(e);
+      const {row} = e;
+      let rowClassName = "";
+      const score = row.score;
+      console.log(score)
+      if (score >= 85) {
+        console.log(1)
+        rowClassName = "excellent"
+      } else if (score > 75) {
+        console.log(2)
+        rowClassName = "good"
+      } else if (score > 65) {
+        rowClassName = "normal"
+      } else {
+        rowClassName = "bad"
+      }
+      return rowClassName
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-table :deep(.excellent) {
+  background-color: darkorange;
+}
+
+.el-table :deep(.good) {
+  background-color: cornflowerblue;
+}
+
+.el-table :deep(.normal) {
+  background-color: aliceblue;
+}
+
+.el-table :deep(.bad) {
+  background-color: #ff6666;
+}
+</style>