element plus 表el-table的多个行列合并

我写技术文章没那么多废话，直接上代码：
1.效果预览：

2.html里代码：

<el-table
        :span-method="objectSpanMethod"
          ref="multipleTableRef"
          v-loading="state.loading"
          border
          :data="list"
        >
          <el-table-column
            label="一级指标"
            prop="str1"
            min-width="180"
          />
          <el-table-column
            label="二级指标"
            prop="str2"
            min-width="180"
          />
          <el-table-column
            label="三级指标"
            prop="str3"
            min-width="180"
          />
          <el-table-column
            label="学生情况"
            prop="str4"
            width="60"
            align="center"
          >
            <template #default="{row}">
              <el-checkbox v-if="row.type == 1" v-model="row.str4" size="large" :true-label="true" :false-label="false"/>
              <!-- <el-radio v-else v-model="row.str4" :label="true"></el-radio> -->
            </template>
          </el-table-column>
          <el-table-column
            label="说明"
            prop="str5"
            width="280"
          >
            <template #default="{row}">
              <el-input
                v-model="row.str5"
                :autosize="{ minRows: 2, maxRows: 4 }"
                type="textarea"
                placeholder="请输入说明"
                maxlength="50"
                show-word-limit
              />
            </template>
          </el-table-column>
          <el-table-column
            label="附件材料"
            prop="str6"
            width="180"
          />
        </el-table>

3.ts里面代码：

const multipleTableRef = ref();
//模拟数据 其中的str1 str2 ...都可以换成你们自己的字段与数据
const list:any = ref([
  {
    str1: "1.学生本人健康状况（说明：指标说明）",
    str2: "1.1健康状况良好（说明：指标说明）",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  {
    str1: "1.学生本人健康状况（说明：指标说明）",
    str2: "1.2遭遇重大突发事件，造成较严重的伤害或长期（突发）患重大疾病",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "1.学生本人健康状况（说明：指标说明）",
    str2: "1.3长期患病（慢性病）",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  {
    str1: "2．学生家庭类型",
    str2: "2.1建档立卡贫困家庭（有《扶贫手册》）",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "2．学生家庭类型",
    str2: "2.2最低生活保障家庭（有相关证明材料）",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  {
    str1: "2．学生家庭类型",
    str2: "2.3特困供养家庭（有相关证明材料）",
    str3: "",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "2．学生家庭类型",
    str2: "2.4特困供养家庭（有相关证明材料）",
    str3: "2.4.1特困供养家庭（有相关证明材料）",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  
  {
    str1: "3．学生户籍地",
    str2: "3.1东部地区（说明：东部省份:辽宁、北京、天津、河北、上海、江苏、浙江、福建、山东、广东、海南）",
    str3: "3.1.1东部地区城镇",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.1东部地区（说明：东部省份:辽宁、北京、天津、河北、上海、江苏、浙江、福建、山东、广东、海南）",
    str3: "3.1.2东部地区农村",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.1东部地区（说明：东部省份:辽宁、北京、天津、河北、上海、江苏、浙江、福建、山东、广东、海南）",
    str3: "3.1.3东部地区国家级贫困县（说明：国务院扶贫开发领导小组办公室公布名单为准）",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.2中部地区（说明：中部省份:吉林、黑龙江、山西、安徽、江西、河南、湖北、湖南）",
    str3: "3.2.1中部地区城镇",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.2中部地区（说明：中部省份:吉林、黑龙江、山西、安徽、江西、河南、湖北、湖南）",
    str3: "3.2.2中部地区农村",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.2中部地区（说明：中部省份:吉林、黑龙江、山西、安徽、江西、河南、湖北、湖南）",
    str3: "3.2.3中部地区国家级贫困县（说明：国务院扶贫开发领导小组办公室公布名单为准）",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.3西部地区（说明：西部省份:内蒙、广西、重庆、四川、贵州、云南、西藏、陕西、甘肃、青海、宁夏、新疆）",
    str3: "3.3.1西部地区城镇",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "3．学生户籍地",
    str2: "3.3西部地区（说明：西部省份:内蒙、广西、重庆、四川、贵州、云南、西藏、陕西、甘肃、青海、宁夏、新疆）",
    str3: "3.3.2西部地区农村",
    str4: "",
    str5: "",
    str6: "",
    type:1,//1复选 0单选
  },
  {
    str1: "2．学生家庭类型",
    str2: "2.4特困供养家庭（有相关证明材料）",
    str3: "2.4.2特困供养家庭（有相关证明材料）",
    str4: "",
    str5: "",
    str6: "",
    type:0,//1复选 0单选
  },//这是一个乱放的结构
]) 


// 合并单元格
const objectSpanMethod = ({row,column,rowIndex,columnIndex}:any) =>{
  if(columnIndex === 0){
    return {
      rowspan: row.rowspan,
      colspan: row.colspan,
    };
  }else if(columnIndex === 1){
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2,
    };
  }else if(columnIndex === 2){
    return {
      rowspan: row.rowspan3,
      colspan: row.colspan3,
    };
  }else{
    return {
      rowspan: 1,
      colspan: 1,
    };
  }
}
//对接口返回数据的处理
const dealList = () => {
  if(list.value.length===0) return ;
  list.value.forEach((item:any, index:any) => {
    item.colspan = 1;
    item.rowspan = 1;
    item.colspan2 = 1;
    item.rowspan2 = 1;
    item.colspan3 = 1;
    item.rowspan3 = 1;
  })
  list.value.sort(dataSort);//对应排序 //当返回的数据顺序很乱时的处理
  list.value.reverse()
  for(let i = 0; i < list.value.length; i++){
    //列合并处理
    if(i+1 < list.value.length && list.value[i].str1 == list.value[i+1].str1){
      list.value[i+1].rowspan = list.value[i].rowspan + 1;
      list.value[i].rowspan = 0;
    }
    if(i+1 < list.value.length && list.value[i].str2 == list.value[i+1].str2){
      list.value[i+1].rowspan2 = list.value[i].rowspan2 + 1;
      list.value[i].rowspan2 = 0;
    }
    if(i+1 < list.value.length && list.value[i].str3 == list.value[i+1].str3){
      list.value[i+1].rowspan3 = list.value[i].rowspan3 + 1;
      list.value[i].rowspan3 = 0;
    }
    //行合并处理
    if(list.value[i].str2 == ""){
      list.value[i].colspan = 2;
      list.value[i].colspan2 = 0;
      list.value[i].colspan3 = 0;
    }
    if(list.value[i].str3 == ""){
      list.value[i].colspan = 1;
      list.value[i].colspan2 = 2;
      list.value[i].colspan3 = 0;
    }
    if(list.value[i].str3 != ""){
      list.value[i].colspan = 1;
      list.value[i].colspan2 = 1;
      list.value[i].colspan3 = 1;
    }
  }
  list.value.reverse()
}

//当返回的数据顺序很乱时的处理
const dataSort = (a:any,b:any) =>{
  if(a['str1'] == b['str1']){
    if(a['str2'] == b['str2']){
        if(a['str3'] < b['str3']){
          return -1;
        }
    }else{
      if(a['str2']<b['str2']){
        return -1;
      }else{
        return 1;
      }
    }
  }else{
    if(a['str1'] < b['str1']){
        return -1;
    }else{
      return 1;
    }
  }
}
//别忘了调用对数据的处理，这个dealList()应该在后端接口返回数据后调用，此处是模拟数据，才直接调用的
onMounted(() => {
  dealList()
});

4.感谢
如果觉得写得好，记得收藏哦 ~ (O_O) ~