element table表格行列合并span-method,根据数据动态行列合并

表格行列合并需要用到 table的方法 span-method

根据数据来进行动态的行列合并,实例如下:

javascript 复制代码
 <el-table
      :data="tableData"
      :span-method="objectSpanMethod" 
      style="width: 100%">
      <el-table-column
        prop="key"
        label="分类"
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
    </el-table>
let data = [
	{ key:'test1', id:0, name:'xxx' },
	{ key:'test1', id:1, name:'xxx' },
	{ key:'test2', id:2, name:'xxx' },
	{ key:'test1', id:3, name:'xxx' },
	{ key:'test2', id:4, name:'xxx' },
	{ key:'test1', id:5, name:'xxx' },
]

我们要根据 key 进行列合并,将test1合并到一起,test2合并到一起

javascript 复制代码
//先处理数据
let one = data.filter(item => item.key === 'test1')
let two= data.filter(item => item.key === 'test2')

//保证test1 在一堆,test2在一堆
tableData = one.concat(two)

//列合并方法
objectSpanMethod =({ row, column, rowIndex, columnIndex })=>{
	const { key } = row
        // test1 使用 rowIndex作为开始
        // test2 采用rowIndex - test1 长度开始
        let last = rowIndex - one.length
        if (columnIndex === 0) { //判断是否是第一列
          if(key === 'test1'){ //判断合并项 R1 R2
             if (rowIndex % one.length === 0) {
              return {
                rowspan: one.length, // 需要合并的行数
                colspan: 1
              }
            }else{ //不在范围内 直接返回默认
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }else if(key === 'test2'){
            if(last % two.length === 0){
              return {
                rowspan: two.length, // 需要合并的行数
                colspan: 1
              }
           }else{
            return {
              rowspan: 0,
              colspan: 0
            }
           }
          }  
        }
}

我们根据 key 进行列合并,按照合并规则 id 为0 1 3 5的数据合并到 test1 中,id为2 4的数据合并到test2中

相关推荐
努力挣钱的小鑫10 天前
【Element】vue2 el-table scope.row 更改数据,试图没有更新
前端·javascript·vue.js·element
上海_彭彭14 天前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element
October_CanYang22 天前
elementUI中el-tree 展开收起(折叠)和 父节点半选状态初始化回显并传给接口
前端·vue.js·element
我看刑22 天前
el-datepicker禁用未来日期(包含时分秒)type=‘datetime’
前端·vue·element
October_CanYang23 天前
vue+ElementUI实现下拉分级菜单:el-select嵌套el-tree树形控件实现下拉树效果(附带模糊查询搜索功能)
vue.js·element
Crazy Struggle1 个月前
.NET 开源餐饮系统支持桌面与Web版
vue.js·.net·element·餐饮系统
wocwin4 个月前
vue+element-ui的列表查询条件/筛选条件太多以下拉选择方式动态添加条件(支持全选、反选、清空)
vue.js·element
小Bk4 个月前
“表单大变身:当ElForm遇上Vue 3,开发效率满级的秘密武器”
前端·element
aiguangyuan5 个月前
Element 页面滚动表头置顶
vue·前端开发·element
伊织code5 个月前
Selenium WebDriver - 网络元素
爬虫·selenium·xpath·element·dom·网络元素·by.name