element-ui 中合并表格的总结

合并表头
js 复制代码
   <el-table :span-method="objectSpanMethod" :header-cell-style="headerMethod"/>
   // 合并表头
    headerMethod6({ row, cloumn, rowIndex, columnIndex }) {
      // row数组对应的是每一列
      row[0].colSpan = 0
      row[1].colSpan = 2
      if (columnIndex === 0) {
        return { display: 'none' }
      }
    },
  //  合并单元行和列, rowIndex从除去表头那一行开始数0,1,...
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  // 偶数行: 第一列合并右侧的一列,第二列清空
        if (rowIndex % 2 === 0) { 
          if (columnIndex === 0) {
            return [1, 2];  //  { rowspan: 1,colspan: 2};
          } else if (columnIndex === 1) {
            return [0, 0];  // 标识删除该单元格
          }
        }
      },
相关推荐
雪芽蓝域zzs4 天前
第十节:动态侧边栏菜单(根据路由 meta 自动渲染菜单)
javascript·vue.js·elementui
m0_579146658 天前
Element UI 表格合并单元格完全指南:从原理到实战
前端·vue.js·elementui
常宇佳10 天前
vue3 实战系列之踩过的一些坑
javascript·vue.js·elementui
aXin_ya12 天前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
山川志~13 天前
Vue + Element UI 实战:如何实现表格时间、金额字段排序
vue.js·ui·elementui
Sterting21 天前
Form表单与校验
javascript·vue.js·elementui
Sterting22 天前
Element-Plus 入门与整体布局
前端·vue.js·elementui
yume_sibai22 天前
Element Plus 基础组件完全指南(12个核心组件)
前端·elementui
di24k24k1 个月前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
森林的尽头是阳光1 个月前
tree回显问题
javascript·vue.js·elementui