el-table合并行

34 阅读1分钟

image.png

<template>
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column label="车联网卡号码" prop="carNetworkNumber">
  <template slot-scope="scope">
    <span v-if="!scope.row.isOpen">
      <em class="visible" @click="scope.row.isOpen = true"></em> {{ (scope.row.carNetworkNumber).replace(/^(.{3})(.*)(.{4})$/, '$1****$3') }} 
    </span>
    <span v-else>
      <em class="invisible" @click="scope.row.isOpen = false"></em> {{ scope.row.carNetworkNumber }} 
    </span>
  </template>
</el-table-column>
<el-table-column label="归属运营商" prop="owningCarrier" show-overflow-tooltip  />
<el-table-column label="号码归属" prop="address" show-overflow-tooltip  />
<el-table-column label="用户状态" prop="state" show-overflow-tooltip  />
<el-table-column label="渠道类型" prop="channelType" show-overflow-tooltip  />
<el-table-column label="入网时间" prop="createTime" show-overflow-tooltip  />
<el-table-column label="功能开通情况" prop="currentCondition" show-overflow-tooltip  />
<el-table-column label="购卡企业名称" prop="enterpriseInfo" show-overflow-tooltip  />
<el-table-column label="购车用户类型" prop="customerType" show-overflow-tooltip  />
</el-table>
</template>
<script>
export default {
  data(){
    return {
      tableData:[
        {
        isOpen:false,
        carNetworkNumber:'19012345612',
        owningCarrier:'电信',
        address:'省市区(县)',
        state:'营业停机',
        channelType:'自有实体渠道',
        createTime:'2024-08-02 10:30:02',
        currentCondition:'语音',
        enterpriseInfo:'xxxxx技术有限公司',
        customerType:'个人用户',
        },
        {
        isOpen:false,
        carNetworkNumber:'19078945612',
        owningCarrier:'',
        address:'',
        state:'',
        channelType:'',
        createTime:'',
        currentCondition:'',
        enterpriseInfo:'',
        customerType:'',
        },
        {
        isOpen:false,
        carNetworkNumber:'19078945612',
        owningCarrier:'',
        address:'',
        state:'',
        channelType:'',
        createTime:'',
        currentCondition:'',
        enterpriseInfo:'',
        customerType:'',
        },
      ]
    }
  },
  methods:{
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const flag = row.owningCarrier && row.address && row.state && row.channelType && row.createTime && row.currentCondition && row.customerType
      if (columnIndex === 1) {//哪一列可以合并(第二列)
        if(flag){
          return { rowspan: 0, colspan: 0 };
        }else{
          // [1,3]表示合并1行3列
          row.owningCarrier = '暂无数据'
          return { rowspan: 1, colspan: 8 };
        }
      }
    },
  }
}
</script>