表格组件示例

Former-commit-id: dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly 096c7586394466fcfa6aeef76f941c65b6c58cb3 [formerly 6ea50546558bb7a5f54d99d34301d3fbae8beea4]]]]] Former-commit-id: 4909868f8dac1be92c76feda0bc3c4a51f8221ca Former-commit-id: 7bcf816a13380e5e1823ef3d8a0050fa95842c73 Former-commit-id: cea58af19fb83f6e4f61a7cc95e999706784a7f2 [formerly 881c7fe80386e4bbd6bdd323eb873c98e7894941] Former-commit-id: edf39aef375f7ecf4d07951f57b8a92baab4ee37 Former-commit-id: 829a819ac72421f791a5cf5a4d62b7a860e7648b Former-commit-id: e3da2e3e4a6f41a5a712760729560efdcf551a3f Former-commit-id: 57e8f1b908c2578a985798a6672a650b9dc53c0c Former-commit-id: 9667afc9b61cdbc5c624a07ee92b4156d0470582
2018-07-22 18:35:37 +08:00
parent 04de4950fc
commit 4bb3422148
23 changed files with 1509 additions and 44 deletions
--- a/src/pages/demo/element/data-table/components/table16/index.vue
+++ b/src/pages/demo/element/data-table/components/table16/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData6"
+      border
+      show-summary
+      style="width: 100%;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="数值 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="数值 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="数值 3">
+      </el-table-column>
+    </el-table>
+    <el-table
+      :data="tableData6"
+      border
+      height="200"
+      :summary-method="getSummaries"
+      show-summary
+      style="width: 100%; margin-top: 20px;">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="姓名">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="数值 1（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="数值 2（元）">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="数值 3（元）">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '表尾合计行',
+  data () {
+    return {
+      tableData6: [{
+        id: '12987122',
+        name: '王小虎',
+        amount1: '234',
+        amount2: '3.2',
+        amount3: 10
+      }, {
+        id: '12987123',
+        name: '王小虎',
+        amount1: '165',
+        amount2: '4.43',
+        amount3: 12
+      }, {
+        id: '12987124',
+        name: '王小虎',
+        amount1: '324',
+        amount2: '1.9',
+        amount3: 9
+      }, {
+        id: '12987125',
+        name: '王小虎',
+        amount1: '621',
+        amount2: '2.2',
+        amount3: 17
+      }, {
+        id: '12987126',
+        name: '王小虎',
+        amount1: '539',
+        amount2: '4.1',
+        amount3: 15
+      }]
+    }
+  },
+  methods: {
+    getSummaries (param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
+      return sums
+    }
+  }
+}
+</script>