vue项目 table的展示列控制+行计数+table相同行的合并

一、效果

二、实现代码

<template>
  <div>
      <div>
         <el-popover 
              placement="bottom"
              title="展示列控制"
              width="350"
              trigger="click">
              <el-checkbox-group v-model="checkedColumnsValue" >
                <el-checkbox v-for="item in columnlist" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
              </el-checkbox-group>
              <i class="el-icon-s-grid column-icon" alt="设置" title="设置" slot="reference"  ></i>
          </el-popover>
        <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark" style="width: 100%" :summary-method="getSummaries" 
              show-summary row-key="RowKey" @selection-change="handleSelectionChange" :span-method="objectSpanMethod">
              <el-table-column v-if="checkedColumnsValue.includes('index')"  type="index" label="序号">  </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('schoolName')"  prop="schoolName"  label="学校名称" sortable>  </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('dep')"  prop="dep" label="检查部门"  width="160" show-overflow-tooltip sortable>  </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('systemClassify')"  prop="systemClassify" label="系统类型" w  show-overflow-tooltip sortable>  </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('lessonType')"  prop="lessonType" label="课程类型"   show-overflow-tooltip sortable>  </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('lessonName')"  prop="lessonName" label="课程名称"   show-overflow-tooltip sortable>   </el-table-column>
              <el-table-column v-if="checkedColumnsValue.includes('num')"  prop="num" label="数量"  width="160"  show-overflow-tooltip sortable>  </el-table-column>
          </el-table>
        </div>
   </div>
</template>

<script>
export default {
  name:'page',
  data() {
    return {
      tableData:[
        {
          num: 1,
          dep: "教导处",
          lessonName: "化学",
          lessonType: "理科",
          hospitalCode: "sch",
          schoolName: "学校名称",
          systemClassify: "系统1",
        },
        {
          num: 3,
          dep: "教导处",
          lessonName: "物理",
          lessonType: "理科",
          hospitalCode: "sch",
          schoolName: "学校名称",
          systemClassify: "系统1",
        },{
          num: 1,
          dep: "教导处",
          lessonName: "地理",
          lessonType: "文科",
          hospitalCode: "sch",
          schoolName: "学校名称",
          systemClassify: "系统2"
        }
      ],
        multipleSelection: [],//table多选
        checkedColumnsValue:[],
        columnlist:[
            {name:'序号', value:'index'} ,
            {name:'学校名称', value:'schoolName'} ,
            {name:'检查部门', value:'dep'} ,
            {name:'系统类型', value:'systemClassify'} ,
            {name:'课程类型', value:'lessonType'} ,
            {name:'疾病名称', value:'lessonName'} ,
            {name:'数量', value:'num'} ,
        ],
        spanArr:{
            index:[],
            schoolName:[],
            dep:[],
            systemClassify:[],
            lessonType:[],
            lessonName:[],
            num:[]
        },//数组合并span
        pos:{
            index:[],
              schoolName:[],
              dep:[],
              systemClassify:[],
              lessonType:[],
              lessonName:[],
              num:[]
        },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    //得到计算数值
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        if (index === 1) {
          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)
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    fetchData(){
      this.checkedColumnsValue = []
      this.columnlist.forEach((item) => {
        this.checkedColumnsValue.push(item.value);
      });
      let len = this.columnlist.length
      for(let i = 0; i < len; i++ ){
          this.getSpanArr(this.tableData, this.columnlist[i].value)
      }
    },
     //相同行的合并
    getSpanArr(data, column) {　
          //清空
        this.spanArr[column] = []
        this.pos[column] = []

        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
                this.spanArr[column].push(1);
                this.pos[column] = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i][column] === data[i - 1][column]) {
              this.spanArr[column][this.pos[column]] += 1;
              this.spanArr[column].push(0);
            } else {
              this.spanArr[column].push(1);
              this.pos[column] = i;
            }
          }
        }
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          //1-5列有相同的合并
        if (columnIndex >=1 && columnIndex <= 5) {
          const _row = this.spanArr[column.property][rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
             rowspan: _row,
             colspan: _col
          }
        }
      },
     //table选择行改变
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
 }
}

</script>
<style lang="scss" scoped>
.table-wrap {
  .el-table{
      margin-top: 10px;
  }   
  .column-icon{
      font-size: 20px;
      float: right;
      margin-top: 10px;
      color: #047d9b;
  }
  .el-checkbox{
      display: block;
  }
}
</style>