标签：return 普陀区 rowIndex column 表头 element columnIndex ui row

背景描述

公司给的界面是如下效果，但是使用了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

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