【ElementUI】Table表格动态合并

最近在做一个大型的港口项目，需要使用到 elementUI table 组件的方法 :span-method=“objectSpanMethod” 进行单元格的动态合并。查看了官方 API 后，发现简单、直白、明了，无法满足下图业务的需求。所以参考了一些其他的网络资料，具体的思路：在动态处理从后端拿回来的数据的时候，是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。
![在这里插入图片描述](https://img-blog.csdnimg.cn/a1384887faf34dd08cacd8ebe4a4c0bd.png

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

1. 首先需要在 data 中定义需要数据，根据数组中存储的标识去合并数据

   data() {
       return {
         // 合并单元格需要的数据
         spanArr: [], //遍历数据时，根据相同的标识去存储记录
         pos: 0, // 二维数组的索引
       };
     },
   

2. 然后在 methods 中定义方法去处理标识（需要合并的数据单元格）

   methods: {
       // 列表数据处理函数
       getSpanArr(data) {
         //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
         this.spanArr = [];
         this.pos = 0;
         //遍历数据
         data.forEach((item, index) => {
           //判断是否是第一项
           if (index === 0) {
             this.spanArr.push(1);
             this.pos = 0;
           } else {
             //不是第一项时，就根据标识去存储
             if (data[index].sdTarget === data[index - 1].sdTarget) {
               // 查找到符合条件的数据时每次要把之前存储的数据+1
               this.spanArr[this.pos] += 1;
               this.spanArr.push(0);
             } else {
               // 没有符合的数据时，要记住当前的index
               this.spanArr.push(1);
               this.pos = index;
             }
           }
         });
         console.log(this.spanArr, this.pos);
       },
   
       // 指定合并的单元格函数
       objectSpanMethod({ row, column, rowIndex, columnIndex }) {
         // 页面列表上 表格合并行 -> 第几列(从0开始)
         // 需要合并多个单元格时 依次增加判断条件即可
         if (columnIndex === 0) {
           // 二维数组存储的数据 取出
           const _row = this.spanArr[rowIndex];
           const _col = _row > 0 ? 1 : 0;
           return {
             rowspan: _row,
             colspan: _col,
           };
           //不可以return {rowspan：0， colspan: 0} 会造成数据不渲染， 也可以不写else，eslint过不了的话就返回false
         } else {
           return false;
         }
       },
    },
   
   

3. 最后在 created 或 mounted 中调用处理函数将异步获取到的数据传递过去进行处理：

   mounted() {
   	this.tableData = …. //异步获取数据
   	this.getSpanArr(this.tableData);
   },
   

---

关注公众号：前端知识分享喵，获取前端学习资料

二、将 el-tree 整棵树设为禁用状态

element 官方给出的示例中，是给部分 tree 节点通过 disabled 属性设置禁用状态。它所写的仅是一段静态代码，如果是后端返回得数据很多，我们想要在查看状态下禁用所有树形节点，显然非常麻烦，需要处理大量的数据。
所以这里通过巧用 props 属性，来实现树形节点的禁用效果。

<el-tree
    ref="permissionTree"
    :data="permissionTree"
    :show-checkbox="showCheckbox"
     node-key="keyId"
     :props="defaultProps">
</el-tree>

data() {
	return {
		defaultProps: {
          label: 'labelName',
          children: 'childrenList',
          disabled: this.isDisabled,
		}
	}
},
methods: {
	isDisabled() {
		return this.$route.params.type === 'view' ? true : false;
	}
}