el-table合并单元格

目录

一、合并的方法

二、注意事项

---

一、合并的方法

1.在el-table中添加属性  span-method

2.在method中添加回调函数，指明从哪里开始合并单元格，合并成多少行，多少列。

3.完整代码

<template>
  <div class="wrap">
    <el-table :data="resultData" :span-method="arraySpanMethod" border>
      <el-table-column prop="rowname" label=""></el-table-column>
      <el-table-column
        prop="caprini"
        label="A"
      ></el-table-column>
      <el-table-column prop="dvt" label="B"></el-table-column>
      <el-table-column prop="pe" label="C"></el-table-column>
      <el-table-column prop="bleeding" label="D"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      resultData: [
        {
          rowname: "评分",
          caprini: "2分",
          dvt: "6分",
          pe: "4分",
          bleeding: "2分",
          mechprevci: "2分",
        },
        {
          rowname: "等级",
          caprini: "低",
          dvt: "高",
          pe: "中",
          bleeding: "低",
          mechprevci: "低",
        },
        {
          rowname: "医嘱建议",
          caprini: "健康宣传+间歇充气加压装置(IPC)",
          rowspan:1,
          colspan:4,
        },
      ],
    };
  },
  methods:{
    arraySpanMethod({row,column,rowIndex,columnIndex}){
      console.log("table",row,column,rowIndex,columnIndex);
      //找到要合并的单元格
      if(row.colspan && columnIndex===1){
        //合并成  1行5列
        return [row.rowspan,row.colspan]
      }
    }
  }
};
</script>

二、注意事项

1. 自定义的合并单元格方法arraySpanMethod({row,column,rowIndex,columnIndex})中，传入的对象{row,column,rowIndex,columnIndex}是固定的，你不能随意命名。

如果随意命名，在方法中输出这几个属性会看到undefined。我自己命名了col和colIndex

    arraySpanMethod({row,col,rowIndex,colIndex}){
      console.log("table",row,col,rowIndex,colIndex);
      if(row.colspan && colIndex===1){
        return [row.rowspan,row.colspan]
      }
    }

 2.{row,column,rowIndex,columnIndex}含义

row:该行每个单元格的数据。例如：第一行（row===0)对应的是

column:该列对应一些有关排序等属性

rowIndex:当前是第几行

columnIndex:当前是第几列

rowIndex和columnIndex一起确定了一个唯一的单元格

/*

希望对你有帮助！

如有错误，欢迎指正！

*/