el-table指定列合并

qq_43383282

已于 2023-03-16 15:22:46 修改

阅读量1.1k

点赞数

文章标签： javascript vue.js ecmascript

于 2023-03-16 15:10:47 首次发布

本文链接：https://blog.csdn.net/qq_43383282/article/details/129586710

版权

这篇博客介绍了如何在Vue.js中使用el-table组件，针对特定列的相同数据进行单元格合并。博主分享了两种非原创的方法，并进行了实践总结。

摘要由CSDN通过智能技术生成

最近有需求关于实现表格指定列相同数据合并，实现效果如下：
在这里插入图片描述
非原创，实验出两种方法，总结记录如下：

table标签使用 :span-method="objectSpanMethod"
方法一
return {
   tableColumnList:  [
	{
        "field": "businessDeptName",
        "fieldName": "业务部门",
    },
    {
        "field": "type",
        "fieldName": "资源类型code",
    }], // 表格字段配置
   tableData: [],// 表格数据
   colFields: ["businessDeptName"，"type"], // 存放所有的表头 一定要与tableData的一致
   spanArr: [], // 存储合并单元格的开始位置
   }
methods: {
// 指定列动态相同数据合并处理   接口中拿到tableData数据后执行getSpanArr()方法
    getSpanArr() {
      for (let i = 0; i < this.tableData.length; i++) {
        const row = i
        // let col = i % this.colCount;
        if (row === 0) {
          // i 表示行 j表示列
          for (