element 表格合并 – 前端知识圈

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <el-table :data="tableData" :span-method="ObjectSpanMethod" border 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>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '王小二',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          }, {
            id: '12987122',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          }, {
            id: '12987122',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          }, {
            id: '12987123',
            name: '王小三',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          }, {
            id: '12987123',
            name: '王小三',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
        ]
      }
    },
    mounted(){
      this.tableList()
    },
    methods: {
      tableList() {
        this.counting(this.tableData,'第一列','id');
        this.counting(this.tableData,'第二列','name');
      },
      counting(data,cellArr,cellkey){
        /*
          *此函数接受两个参数
          *data 表示表格数据
          *cellArr 接受一个变量名称，用于该列的计数数组
          *cellkey 需要检查的key
        */
        this[cellArr] = [];
        var cellIndex;
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this[cellArr].push(1)
            pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i][cellkey] === data[i - 1][cellkey]) {
              this[cellArr][pos] += 1
              this[cellArr].push(0)
            } else {
              this[cellArr].push(1)
              pos = i
            }
          }
        }
      },
      ObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this['第一列'][rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if (columnIndex === 1) {
          const _row = this['第二列'][rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  })
</script>
发送评论编辑评论
发送评论 编辑评论

推荐文章

发送评论编辑评论
