element ui 合并单元格封装_spanmethod 封装

前言

通过element-ui的table组件span-method属性,封装一个可以自动根据字段对 行 进行自动合并的方法

SPAN-METHOD属性

element-ui中table组件的属性,回调函数是一个行和列的合并方法,对每个单元格执行方法,通过返回当前单元格所占行列数目进行合并

<template>
	<div>
		<el-table :span-method="spanMethod">
			<el-table-column></el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		methods:{
			spanMethod({row,column,rowIndex,columnIndex}){
				if(columnIndex===0){
					if(rowIndex%2===0){
						// 返回值可以为数组,第一个值为合并的行数,第二个值为合并的列数
						return [2,1]	
					}else{
						// 返回值也可以为对象,rowspan为合并的行数,colspan为合并的列数
						return{rowspan:0,colspan:0}
					}
				}
			}
		}
	}
</script>

回调函数参数:

代码封装：

//参数:list-element-ui表格数据,props-需要进行合并的列对应的字段列表,rowIndex-当前行数,colIndex-当前列数
Vue.prototype.$spanMethodFunc=function(list, props, rowIndex, colIndex) {
  if (colIndex >= props.length || !props[colIndex]) {
    // 根据传入的字段列表,判断不需要合并的列
    return [1, 1]
  } else {
    //使用try-catch,如果方法错误返回错误信息
    try {
      let _props = props.slice(0, colIndex + 1)//截取需要用到判断的字段名
      // 判断是否从本行开始合并
      let merge = _props.some(item => {
        // 如果当前行所需要判断合并的字段中有一个跟前一条数据不一样,本条数据即为合并的起点,第一条数据直接为合并起点
        return (
          rowIndex == 0 || (item&&list[rowIndex][item] != list[rowIndex - 1][item])
        )
      })
      // 如果本条数据是合并起点,获取需要合并的数据条数
      if (merge) {
        let _list = list.slice(rowIndex)//截取从本条数据开始的列表
        // 获取合并行数
        let _lineNum = _list.findIndex((item, ind) => {
          //同merge判断,找到合并的终点
          return (
            ind &&
            _props.some(item1 => {
              return (item1&&item[item1] != _list[0][item1])
            })
          )
        })
        // 合并行数为-1时,输出_list的长度,否则输出_lineNum
        return [_lineNum === -1 ? _list.length : _lineNum, 1]
      } else {
        // 否则,返回[0,0],即本条数据被合并
        return [0, 0]
      }
    } catch (err) {
      // 打印报错
      console.error('spanMethodFunc error:', err)
    }
  }
},

代码示例：

<script>
	export default {
		data(){
			return{
				list:[{
                    	department: '设计',
                    	grouping: '',
                    	duty: '总监',
                    	name: '刘备',
                    	age: 34,
                    	sex: 1,
                    	num: '34'
                	}],
				props:["department","group","duty","","age"]  // 对应的合并列，不需要合并的空字符串代替
			}
		},
		methods:{
			spanMethod({row,column,rowIndex,columnIndex}){
				return this.$spanMethodFunc(this.list,this.props,rowIndex,columnIndex)
			},
		}
	}
</script>