结合element完成分列分级树形折叠分级表单

爱学习的小林林

已于 2022-03-23 15:40:32 修改

阅读量750

点赞数 1

分类专栏：娜某工作记录文章标签： html 前端 javascript

于 2022-03-11 17:15:02 首次发布

本文链接：https://blog.csdn.net/qq_46608252/article/details/123428446

版权

结合element完成分列分级树形折叠分级表单

分为一级部门、二级部门、三级部门
合并如图展示所示：
在这里插入图片描述

<template>
  <div id="app">
    <el-table
      :data="tableData"
      :span-method="spanTable"
      border
      :row-class-name="tableRowClassName"
      fit
      header-align="center"
      :row-style="{padding:'0px'}"
      :cell-style="{padding:'0px'}"
    >
      <template v-for="(column,key) in columns">
        <el-table-column
          v-if="column.span==true"
          :key="key"
          :prop="column.prop"
          align="center"
          :label="column.label"
        >
          <template slot-scope="scope">
            <div v-if="scope.row[column.prop] && scope.row[column.prop]!=summaryFlag && scope.row[column.prop]!=otherColumnValue ">
              <el-button
                type="text"
                size="mini"
                @click="toggleRowData(spanColumn[key],scope.row)"
              ><i
                v-if="getRowSpan(key,scope.row).oriSpan>1"
                :class="toggleStatus(spanColumn[key],scope.row[column.prop])?'el-icon-circle-plus': 'el-icon-remove'"
              ></i>{
   {
   
                scope.row[column.prop]
              }}
              </el-button>
            </div>
            <div v-else>
              {
   {
    scope.row[column.prop] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="key"
          :prop="column.prop"
          align="center"
          :label="column.label"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
   
  name: 'App',
  props: {
   
    salaryList: {
   
      type: Array,
      default() {
   
        return []
      }
    }
  },
  data() {
   
    return {
   
      tableData: [], // 表格数据
      otherColumnValue: '-',
      columns: [
        {
   
          label: '一级单元（事业部）',
          prop: 'first',
          span: true
        },
        {
   
          label: '二级单元（部门）',
          prop: 'second',
          span: true
        },
        {
   
          label: '三级单元',
          prop: 'third',
          span: true
        },
        {
   
          label: '人月总数',
          prop: 'personelMonthTotal',
          summary: true
        },
        {
   
          label: '人月数',
          prop: 'personelMonthCount',
          summary: true
        }
      ],
      spanColumn: [], // 展开的行
      rowSpanMaps: null,
      existCache: {
   },
      toggleMap: null,
      loadData: [ // 数据格式
        {
   
          first: '第一事业部',
          secend: '第一支撑室',
          thrid: 'it运维部',
          identificationF: 1,
          identificationS: 1,
          identificationT: 1,
          assessType: '1'