Vue动态多级表头+行列合计+可编辑表格-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue动态多级表头+行列合计+可编辑表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

新建组件：Table.vue

<template>
  <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label">
    <template v-for="item in coloumnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length"
        :key="item.id"
        :coloumn-header="item"
      />
      <el-table-column
        v-else
        :key="item.name"
        :label="item.label"
        :prop="item.prop"
      />
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: 'TableColumn',
  props: {
    coloumnHeader: {
      type: Object,
      required: true
    }
  }
}
</script>

新建组件：文章来源地址https://www.toymoban.com/news/detail-562774.html

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod" border show-summary>
      <template v-for="item in tableConfig">
        <table-column
          v-if="item.children && item.children.length"
          :key="item.id"
          :coloumn-header="item"
        />
        //编辑操作按钮
        <el-table-column
          v-else-if="item.label == '操作'"
          :key="item.id + 'r'"
          align="center"
          :label="item.label"
          width="200"
        >
          <template #default="{ row }">
            <el-button
              v-if="row.edit"
              size="small"
              type="success"
              @click="confirmEdit(row)"
            >
              保存
            </el-button>
            <el-button
              v-else
              icon="el-icon-edit"
              size="small"
              type="primary"
              @click="row.edit = !row.edit"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
        
        //一级表头
        <el-table-column
          v-else
          :key="item.id + 1"
          :label="item.label"
          :prop="item.prop"
        >
        //编辑表格
        <template slot-scope="scope">
            <input
              type="text"
              v-model="scope.row[item.prop]"
              v-show="scope.row.edit"
            />
            <span v-show="!scope.row.edit">{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
// 引入api
import TableColumn from './Table.vue'
export default {
  // 定义页面数据
  components: { Treeselect, DynamicTable, TableColumn },
  data() {
    return {
      // 表数据
      tableData: [
      	{
          parkName: '花木',
          date: '2023',
          count0: '1',
          money0: '2',
          count1: '3',
          money1: '4',
          edit: false,
        }
      ],
      // 表头数据
      tableConfig: [
            {
                "id": 2, 
                "label": "停车场名称", 
                "prop": "parkName", 
                "children": null
            }, 
            {
                "id": 85, 
                "label": "日期", 
                "prop": "date", 
                "children": null
            }, 
            {
                "id": 0, 
                "label": "微信支付", 
                "prop": "0", 
                "children": [
                    {
                        "id": 12, 
                        "label": "交易笔数", 
                        "prop": "count0", 
                        "children": null
                    }, 
                    {
                        "id": 89, 
                        "label": "交易金额", 
                        "prop": "money0", 
                        "children": null
                    }
                ]
            }, 
            {
                "id": 1, 
                "label": "支付宝支付", 
                "prop": "1", 
                "children": [
                    {
                        "id": 40, 
                        "label": "交易笔数", 
                        "prop": "count1", 
                        "children": null
                    }, 
                    {
                        "id": 61, 
                        "label": "交易金额", 
                        "prop": "money1", 
                        "children": null
                    }
                ]
            }
        ],
    }
  }
}
</script>