vxe-table使用之可编辑表格与动态计算

63 阅读 0 评论 42 点赞

我是靠谱客的博主发嗲摩托，最近开发中收集的这篇文章主要介绍vxe-table使用之可编辑表格与动态计算，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果图：

表格代码部分：

<vxe-table
          border
          show-header-overflow
          show-overflow
          show-footer
          class="mytable-style"
          ref="xTable"
          highlight-hover-row
          :footer-method="footerMethod"
          :footer-cell-class-name="footerCellClassName"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :data="tableData">
          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="资料名称" min-width="100"></vxe-table-column>
          <vxe-table-column field="one" title="第一季度销量" :edit-render="{name: '$input', immediate: true, props: {type: 'number'}, events: {change: updateFooterEvent}}" width="150"></vxe-table-column>
          <vxe-table-column field="two" title="第二季度销量" :edit-render="{name: '$input', immediate: true, props: {type: 'number'}, events: {change: updateFooterEvent}}" width="150"></vxe-table-column>
          <vxe-table-column field="three" title="第三季度销量" :edit-render="{name: '$input', immediate: true, props: {type: 'number'}, events: {change: updateFooterEvent}}" width="150"></vxe-table-column>
          <vxe-table-column field="four" title="第四季度销量" :edit-render="{name: '$input', immediate: true, props: {type: 'number'}, events: {change: updateFooterEvent}}" width="150"></vxe-table-column>
          <vxe-table-column field="total" title="销量合计" width="140">
              <template #default="{ row }">
              <span>{{ countAmount(row) }}</span>
            </template>
          </vxe-table-column>
    </vxe-table>

创建js文件模拟数据：

module.exports = {
    dataList2:[
        {name: 'vxe-table 从入门到放弃',one: 10,two: 8, three: 2,four:10},
        {name: 'JavaScript 权威指南',one: 10,two: 8, three: 2,four:10},
        {name: 'Vue 入门到精通',one: 10,two: 8, three: 2,four:10},
        {name: '深入现代 JavaScript 应用开发',one: 10,two: 8, three: 2,four:10},
        {name: 'vxe-table 从入门到放弃',one: 10,two: 8, three: 2,four:10},
        {name: 'JavaScript 权威指南',one: 10,two: 8, three: 2,four:10},
        {name: 'Vue 入门到精通',one: 10,two: 8, three: 2,four:10},
        {name: '深入现代 JavaScript 应用开发',one: 10,two: 8, three: 2,four:10}
    ]
}

在页面上引入数据并使用：

import { dataList2 } from './data'
data() {
    return {
      tableData: [],
    };
},
created() {
    this.tableData = dataList2;
},

动态计算方法：

methods: {
    // 添加表格背景颜色
    footerCellClassName ({ $rowIndex, columnIndex }) {
        if (columnIndex === 1) {
            if ($rowIndex === 0) {
                return 'col-blue'
            }
        }
    },
    // 销量合计
    countAmount (row) {
        return Number(row.one) + Number(row.two) + Number(row.three) + Number(row.four)
    },
    // 所有销量合计
    countAllAmount (data) {
        let count = 0
        data.forEach(row => {
        count += this.countAmount(row)
        })
        return count
    },
    // 在值发生改变时更新表尾合计
    updateFooterEvent () {
        const $table = this.$refs.xTable
        $table.updateFooter()
    },
    sumNum (list, field) {
        let count = 0
        list.forEach(item => {
        count += Number(item[field])
        })
        return count
    },
    footerMethod ({ columns, data }) {
        return [
            columns.map((column, columnIndex) => {
                if (columnIndex === 0) {
                    return '合计'
                }
                if (['one','two','three','four'].includes(column.property)) {
                    return this.sumNum(data, column.property)
                }else if (columnIndex === 6) {
                    return `${this.countAllAmount(data)}`
                }
                return null
            })
        ]
    },
  },