element-ui 表格(table)合并表头下面合并列且可以收缩展开

最新推荐文章于 2024-03-28 19:23:17 发布

momo_mom177

最新推荐文章于 2024-03-28 19:23:17 发布

阅读量2k

点赞数 2

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/momo_mom177/article/details/128384477

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

百度了一大堆，发现了首行不能合并，想到了用dom做，找到了下面这个链接

要点记录：

1、表头合并 —— 给table添加属性:header-cell-style="headerStyle",里面给首行设置跨行

element-ui表头合并 - ^Mao^ - 博客园

2、表内合并 —— 给table添加属性:span-method="arraySpanMethod",里面设置合并

Element - The world's most popular Vue UI framework

3、表收缩 —— 给table添加属性:tree-props="childrenObj", 表示表格可展开,不要用原本的树形结构，因为我们有合并，直接用elementui自带的第一行合并带子级数据，展开后子级插在合并的中间，所以我们采用：合并的那一列标记有没有子级，合并的最后一列增加子级数据，自己做收缩展开功能

基于element-ui的table实现树级表格操作及单元格合并_trottoir的博客-CSDN博客

全部代码如下：

<el-table
      v-if="!listLoading"
      ref="table"
      :data="listAttr"
      fit
      stripe
      :height="height"
      :tree-props="childrenObj"
      :header-cell-style="headerStyle"
      class="width-per-100 margin-top-10"
      :span-method="arraySpanMethod"
      :row-key="getRowKey"
    >
      <el-table-column align="center" width="250" label="地区及急救分中心">
        <el-table-column min-width="170" align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.hasChildren" class="arrow-icon" @click="toggleRowExpansion(scope.row)">
              <i :class="scope.row.isExpand ? 'el-icon-caret-bottom' : 'el-icon-caret-right'" />
            </span>
            <span>{{ scope.row.name | noDataFilterLine }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="70" align="center">
          <template slot-scope="scope">{{ scope.row.type === 1 ? '呼入量' : '出车量' }}</template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableLabelList"
        :key="index"
        align="center"
        :label="item"
        min-width="80"
      >
        <template slot-scope="scope">{{ scope.row.list[index] }}</template>
      </el-table-column>
    </el-table>

 // 表头跨列   
headerStyle({ row, column, rowIndex, columnIndex }) {
      // 1.1 让第0行的第0列跨2行
      if (rowIndex === 0 && columnIndex === 0) {
        this.$nextTick(() => {
          document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2)
          return {}
        })
      }
      // 1.2 被覆盖的进行隐藏
      if (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1)) {
        return {
          display: 'none'
        }
      }
      return {}
    },
// 合并表格
    arraySpanMethod({ row, columnIndex, rowIndex }) {
    // 合并第一列的两行
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
// 收缩展开方法
    toggleRowExpansion(row) {
      row.isExpand = !row.isExpand
      const item = this.listAttr.find(i => {
        return i.centerId === row.centerId && i.cityCode === row.cityCode && i.index === row.index && i.type === 2
      })
      if (this.$refs.table) {
        this.$refs.table.toggleRowExpansion(item, row.isExpand)
      }
    },