element ui 表格合并行和列

<el-table
  :data="tableData"
  :span-method="arraySpanMethod"
  border
  style="width: 100%"
>
	<el-table-column
	  v-for="col in columns"
	  :prop="col.dataIndex"
	  :key="col.dataIndex"
	  :label="col.title"
	  align="center"
	></el-table-column>
</el-table>
methods: {
	// 合并行或列
    arraySpanMethod({ row, rowIndex, columnIndex }) {
      // 合并的列(成一整行)
      if (row.colSpanRow) {
        if (rowIndex === rowIndex) { // 哪一行需要合并
          if (columnIndex === 1) { // 第二列的值保留
            return [1, 19]
          } else { // 其余隐藏
            return [0, 0]
          }
        }
      } else {
		// 第一列和第二列
        if (columnIndex === 1 || columnIndex === 0) {
          if (row.objIndex === 'col0') {
            // 合并的行
            return {
              rowspan: row.num,
              colspan: 1
            }
          } else {
            // 其余被合并子项隐藏
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
}

在这里插入图片描述

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐