elementui的table表格问题？

Question

这种表单用elementui table要怎么排

Answer 1

v-for 嵌套循环一下表头，然后因为你需要多个合计值，所以需要自己写合计，并不能直接用 show-summary，需要用 computed 根据 sourceDate 来计算，或者写一个函数来计算行数据、两个合计值 以及需要配合 span-method 方法的 rowspan、colspan 合并值值。

最终你组装完的表格数据结构是这样的

var tableData = [
    { month: '1月', rowspan: 1, user1_item1: 1, user1_item2: 1, user1_item3: 1, user2_item1: 1, user2_item2: 1, user2_item3: 1, user3_item1: 1, user3_item2: 1, user3_item3: 1 },
    { month: '2月', rowspan: 1, user1_item1: 0, user1_item2: 0, user1_item3: 0, user2_item1: 0, user2_item2: 0, user2_item3: 0, user3_item1: 0, user3_item2: 0, user3_item3: 0 },
     ...
    { month: '合计', rowspan: 2, user1_item1: 1, user1_item2: 1, user1_item3: 1, user2_item1: 1, user2_item2: 1, user2_item3: 1, user3_item1: 1, user3_item2: 1, user3_item3: 1 },
    { month: '', rowspan: 0, user1_item1: 3, user1_item2: 0, user1_item3: 0, user2_item1: 3, user2_item2: 0, user2_item3: 0, user3_item1: 3, user3_item2: 0, user3_item3: 0 }
]

其实 rowSpan 可以不要，但是既然你都需要去组装了就还是加上的好，最后 tableSpanMethod 里面少写一个判断。

贴上来 template 及 methods 的伪代码：

<template>
  <el-table :data="testTableData" :span-method="tableSpanMethod" border>
    <el-table-column prop="month" width="80" align="center" />
    <el-table-column v-for="user in userList" :key="user.id" :label="user.realname" prop="user" align="center">
      <el-table-column v-for="item in checkList" :key="item.id" :label="item.label" :prop="user.id+'_'+item.id" align="center" />
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data(){
     tableData: [],
     userList: [{ id: 'user1', realname: '张三' }, { id: 'user2', realname: '李四' }, { id: 'user3', realname: '王五' }],
     checkList: [{ id: 'item1', label: '维修' }, { id: 'item2', label: '巡检' }, { id: 'item3', label: '报告' }]
  },
  methods:{
    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
      const checkLen = this.checkList.length
      // 首列跨行判断
      if (columnIndex === 0) return [row.rowspan, row.rowspan ? 1 : 0]
      // 尾行合并判断
      if (rowIndex === this.tableData.length - 1 && !!columnIndex) {
        // columnIndex - 1 如果能被 检查项目数 整除则跨列，不能被整除则不展示
        if (Number.isInteger((columnIndex - 1) / checkLen))  return [1, checkLen]
        return [0, 0]
      }
      return [1, 1]
    },
  }
}
</script>