背景描述

公司给的界面是如下效果，但是使用了elment-ui的多行合并时会遇到表格头部内容的设计出的二级表头，不符合我的需求。

官网和期望效果对比：

实现步骤

1. 为el-table标签上的 header-cell-style 属性绑定回调函数
2. 跨行合并以及对其他列进行隐藏

• 针对上面的效果图就是对 第0行的设置跨2行，对第一行的第0列、第1列不占位置

template代码：

 <!-- 
  1. 多级表头的话，就在 el-table-column中嵌套多层
  2. 如果需要为表头设置颜色，则需要在 tl-table标签上的 header-cell-style 属性绑定回调函数
        回调函数的返回值有两种：
          2.1 可以返回一个对象，来表示需要为表头进行统一样式的设置
          2.2 可以是一个回调函数
 -->
  <div>
    <h4>期望效果</h4>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="headerStyle"
    >
      <el-table-column prop="name" label="username"></el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
    <hr />
    <h4>官网效果</h4>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="username" prop="name"></el-table-column>
      <el-table-column align="center" label="姓名" width="120">
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="age"></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="地址">
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="120"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="市区" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>

js代码：

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          age: 20,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          age: 23,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      // 2.1
      // headerStyle: {
      //   border: "1px solid orange",
      // },
    };
  },
  methods: {
    /*
     2.2 回调函数中接收4个参数分别为：row, column, rowIndex, columnIndex    
        参数的含义：
          row   为表格每一行的元素，数组
          column 为每一列的元素，对象
          rowindex  第几行，从0开始；
          columnIndex  第几列，从0开始；

    */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      // 让第一行的第二个元素占2行
      if (rowIndex == 0) {
        row[1].rowSpan = 2;
      }
      if (rowIndex == 1) {
        row[0].colSpan = 0;
        row[1].colSpan = 0;
        if (columnIndex == 0 || columnIndex == 1) {
          return {
            display: "none",
          };
        }
      }
      // return {
      //   backgroundColor: "green",
      // };
    },
  },
};

参考

https://blog.csdn.net/LJX888666/article/details/120704457

标签：return,普陀区,rowIndex,column,表头,element,columnIndex,ui,row
来源： https://www.cnblogs.com/it774274680/p/16464310.html