vxe-table树形表格且合并

小狗哇咔咔

已于 2024-08-27 17:53:58 修改

阅读量246

点赞数 1

文章标签： vue.js javascript 前端

于 2024-08-27 17:51:41 首次发布

本文链接：https://blog.csdn.net/m0_66344827/article/details/141608731

版权

1.需要在vxe-table中配置树形表格并且将树形中的数据进行合并

树形表格在后端将数据全部返回,不用做任何修改,指明父节点id即可,加上:tree-config

        <vxe-table  border size="small" style="color: #333" keep-source show-overflow resizable ref="xTable"
            align="center" :data="handleTableData" @checkbox-all="selectAll" @checkbox-change="selectChange"
            :row-style="rowClassName"
            :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', accordion: true }" :span-method="spanMethod">
            <vxe-column field="name" title="名称" width="280" tree-node></vxe-column>
            <vxe-column field="idcard" title="身份证号" :formatter="retentionPeriodFormat" />
            <vxe-column field="remark" title="备注" show-overflow></vxe-column>
            <vxe-table-column title="操作" align="center" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" 
                  @click="editUpdate(scope.row)">
                  修改
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)">
                  详情
                </el-button>
              </template>
            </vxe-table-column>
          </vxe-table>

2.配置合并信息

      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (row.id === '-1') {
          if (columnIndex == 0) {
            return {
              rowspan: 1,
              colspan: 4,
              className: 'vxe-cell--merge'
            };
          }else { //这里将其它单元格进行隐藏,此处也是关键,其他单元格不隐藏会产生横向滚动条
            return { rowspan: 1, colspan: 0 };
          }

        }
        return { rowspan: 1, colspan: 1 };
      },

3.还想配置一下他的背景颜色

    //合并行背景颜色
    rowClassName ({ row }) { 
    //存在父节点的或者id是-1,代表是树形结构中数据,(后台采用map,所以父节点可以不存在paraentId)
      if (row.id === '-1' || row.parentId) {
        return {
          backgroundColor: '#f5f6f8',
        }
      }else{
        return null
      }
    },