标签：customer 表格 spanArr 23 合并 pos 动态 data row

实现需求：将客户一样拜访次数列合并成一行展示。如图

实现代码

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="itme" label="拜访时间" width="180" />
      <el-table-column prop="name" label="销售人员" />
      <el-table-column prop="customer" label="客户" />
      <el-table-column prop="keshi" label="拜访科室" />
      <el-table-column prop="count" label="拜访次数" />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // getSpanArr方法中需要用到的两个属性
      spanArr: [],
      pos: 0,
      tableData: [
        {
          itme: '2022-6-6 11:23:47',
          name: '张三',
          customer: '湖北博远达生物科技有限公司',
          keshi: '生殖中心',
          count: 2
        },
        {
          itme: '2022-6-6 11:23:47',
          name: '李四',
          customer: '湖北博远达生物科技有限公司',
          keshi: '生殖中心',
          count: 2
        },
        {
          itme: '2022-6-6 11:23:47',
          name: '王五',
          customer: '中南大学湘雅三医院',
          keshi: '生殖中心',
          count: 2
        },
        {
          itme: '2022-6-6 11:23:47',
          name: '赵六',
          customer: '中南大学湘雅三医院',
          keshi: '生殖中心',
          count: 2
        }
      ]
    }
  },
  mounted() {
    this.getSpanArr(this.tableData)
  },
  methods: {
    //处理数据为合并表格做准备
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          //这里的customer是第一列的属性，我用来判断是否相同。
          if (data[i].customer === data[i - 1].customer) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并第五列
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          // _row = 0，_col = 0 表示这一次不合并，不显示，
          // _row = 2，_col = 1 表示这一次合并第一列的两行
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

标签：customer,表格,spanArr,23,合并,pos,动态,data,row
来源： https://www.cnblogs.com/songzxblog/p/16381043.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。