vue2&Element-ui实现表格单元格合并-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2&Element-ui实现表格单元格合并。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

由于项目需要实现单元格合并目前只是单页没有做分页处理先上效果图
element表格合计栏合并单元格,ui,vue.js,javascript

看下数据结构

Element table提供的api arraySpanMethod

columnIndex=0表示从第一列开始 rowIndex表示需要操作的行数
同济医院加上合计有12行从0开始<=11
判断条件是rowIndex余12===0

我们打印一下
element表格合计栏合并单元格,ui,vue.js,javascript

或者改成
表示从0开始到12行合并为一行
效果已实现后期在详细分析下下面是代码


```javascript
在这里插入代码片
<template>
  <div>
    <div class="table">
      <el-table
        :header-row-style="{
          height: '40px',
        }"
        :row-style="{ height: '40px' }"
        :cell-style="{ padding: '1px', background: '#oldlace' }"
        :data="tableData1"
        style="width: 100%"
        :span-method="arraySpanMethod"
        empty-text="统计中"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          align="center"
          prop="v0"
          label="名称"
        ></el-table-column>
        <el-table-column
          algin="center"
          prop="leader"
          label="市领导"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="v1"
          label="问题数量"
        ></el-table-column>
        <el-table-column align="center" label="问题类型">
          <el-table-column align="center" prop="v2" label="基础设施">
          </el-table-column>
          <el-table-column
            align="center"
            prop="v3"
            label="民生保障"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="v4"
            label="社会治理"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="v5"
            label="生产经营"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="v6"
            label="生态环保"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="v7"
          label="办结数量"
        ></el-table-column>
        <el-table-column align="center" prop="v8" label="办结率">
          <template slot-scope="scope">
            <span>{{ scope.row | rate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="群众满意度">
          <el-table-column
            align="center"
            prop="v9"
            label="满意"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="v10"
            label="一般"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="v11"
            label="不满意"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


```javascript
在这里插入代码片
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //同济医院
      if (columnIndex === 0 && rowIndex <= 11) {
        console.log(rowIndex % 12)
        if (rowIndex === 0) {
          return {
            rowspan: 12,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      //同济医院第二行合并
      if (columnIndex === 1 && rowIndex <= 9) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
      //协和医院
      if (columnIndex === 0 && rowIndex > 11 && rowIndex <= 19) {
        // if (rowIndex % 4 === 0) {
        //   return [4, 1]
        // } else {
        //   return [0, 0]
        // }
        if ((rowIndex - 4) % 8 === 0) {
          return [8, 1]
        } else {
          return [0, 0]
        }
      }
      //妇幼保健院
      if (columnIndex === 0 && rowIndex > 19 && rowIndex <= 29) {
        if (rowIndex % 10 === 0) {
          return [10, 1]
        } else {
          return [0, 0]
        }
      }
      //人民医院
      if (columnIndex === 0 && rowIndex > 29 && rowIndex <= 35) {
        if (rowIndex % 6 === 0) {
          return [6, 1]
        } else {
          return [0, 0]
        }
      }
    },

代码仓库
码云： https://gitee.com/db121/vue_admin
github: https://github.com/121066/vue-admin-pc文章来源地址https://www.toymoban.com/news/detail-651318.html

到了这里，关于vue2&Element-ui实现表格单元格合并的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！