Element UI基础表格数据转树形表格数据

原创

小马阿秀 2023-07-21 11:50:34 ©著作权

©著作权归作者所有：来自51CTO博客作者小马阿秀的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

在项目中遇到一个较为特殊的页面，它默认展示基础表格数据但在搜索栏提供了Checkbox 多选框。勾选“聚合”将会以树形数据展示。

考虑实现

由于基础表格与树形表格在注入data对象数组格式上还是有区别，当 data 中包含 children 字段时，被视为树形数据。格式不同决定了在获取数据时处理方式的不同，结合当前页面要么在勾选“聚合”后再次请求后台获取适配树形表格的结构数据，要么在默认加载基础表格数据的同时对数据再加工在前端重新构建树形表格数据备用，等勾选“聚合”按钮后传入数据进行展示。在数据量大的情况下我这边采用的是第二种方式并且用到了Element UI Pagination 分页。

前端实现

页面上分别用两个Table 表格组件展示基础表格数据和树形表格数据，以勾选聚合触发jhchecked的Boolean值来隐藏或显示两种表格数据

构建数据

//vue 对象数组去重
    unique(arr) {
      const res = new Map();//定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.deviceSn) && res.set(arr.deviceSn, 1));
    },
    getDataTable(){
        this.loading = true;
        getsjgjdatatable(this.queryParams).then(response =>{
        //基础表格数据
            this.tableData = response.data
            this.total = response.data.length// 拷贝一份数据
        let list = JSON.parse(JSON.stringify(response.data))
        // splice处理数组的方法会改变原数组,所以需要拷贝一份
        this.pageList = list.splice(0, this.size)
            this.loading = false;
            //构建树形表格数据
        if(response.data.length > 0){          
        let arr1 = this.unique(this.tableData);
          var jhData = [];
          for(var i=0;i<arr1.length;i++){
            var obj = {};
            obj.id = arr1[i].deviceSn+'_'+i
            var newlist = [];
            for(var j=0;j<this.tableData.length;j++){
              var chil = {};
              if(arr1[i].deviceSn==this.tableData[j].deviceSn){
                chil.id = this.tableData[j].eventId
                chil.eventId = this.tableData[j].eventId
                chil.deviceSn = this.tableData[j].deviceSn
                chil.stationSn = this.tableData[j].stationSn
                chil.reportTime = this.tableData[j].reportTime
                chil.info = this.tableData[j].info
                chil.stationName = this.tableData[j].stationName
                chil.deviceName = this.tableData[j].deviceName
                chil.typeName = this.tableData[j].typeName
                chil.levelName = this.tableData[j].levelName
                newlist.push(chil);
              }
            }
            obj.children = newlist
            obj.reportTime = arr1[i].stationName+':'+arr1[i].deviceName+' 告警数：'+newlist.length
            jhData.push(obj);
          }
          this.jhtableData = jhData
            this.jhtotal = jhData.length// 拷贝一份数据
        let jhlist = JSON.parse(JSON.stringify(jhData))
        // splice处理数组的方法会改变原数组,所以需要拷贝一份
        this.jhpageList = jhlist.splice(0, this.jhsize)
        }else{
          this.jhpageList= []
        }

        })
    },

分页

<el-table
      :span-method="arraySpanMethod"
          v-show="jhchecked"
      v-loading="loading"
      @select="select" @select-all="selectAll" @selection-change="selectionChange"
            border
            ref="table"
            height="720"
            row-key="id"
            :data="jhpageList"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="reportTime" label="发生时间" align="left" :show-overflow-tooltip="true">
          </el-table-column>
            <el-table-column prop="info" label="告警" align="left" :show-overflow-tooltip="true">
          </el-table-column>
            <el-table-column prop="stationName" label="站点" align="center" :show-overflow-tooltip="true">
          </el-table-column>
            <el-table-column prop="deviceName" label="设备" align="center" :show-overflow-tooltip="true">
          </el-table-column>
            <el-table-column prop="typeName" label="告警类型" align="center" show-overflow>
          </el-table-column>
            <el-table-column prop="levelName" label="告警级别" align="center" show-overflow>
          </el-table-column>
            <el-table-column prop="xq" label="详情" align="center" show-overflow>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleXq(scope.row)"
                  >查看</el-button
                >
              </template>
          </el-table-column>
            <el-table-column prop="cz" label="操作" align="center" show-overflow>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleQr(scope.row)"
                  >确认</el-button
                > 
              <el-divider direction="vertical"></el-divider>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleTj(scope.row)"
                  >提交工单</el-button
                >
              </template>
          </el-table-column>
          </el-table>
          
          <el-pagination
          style="float: right;margin-top: 25px;"
          v-show="jhchecked"
                :page-sizes=[25,50,100]
                  background
                  @size-change="jhhandleSizeChange"
                  @current-change="jhhandleCurrentChange"
                  :current-page="jhcurrent"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="jhtotal"
                ></el-pagination>


  data() {
    return {
      open:false,
      isDevice:false,
      isReturn:false,
      nowDateTime:getNowDateTime(),
      stationSn:null,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      expandDefault:[],
      checkDefault:[],
      title:"",
      total:0,
      loading:false,
      tableData:[],
      jhtableData:[],
      size: 25,
      current: 1,
      pageList: [],
      jhtotal:0,
      jhsize: 25,
      jhcurrent: 1,
      jhpageList: [],
    };
  },
  methods:{
  
    //改变当前页数
      jhhandleSizeChange(val) {
        console.log("改变当前页数")
        // 只要换页数就直接返回1页
        this.jhsize = val
        this.jhcurrent = 1
        this.jhpageList = this.jhtableData.slice(0, this.jhsize)
      },
      // 改变当前页码
      jhhandleCurrentChange(val) {
        console.log("改变当前页码")
        this.jhcurrent = val
        //如果页码为1,就正常切割
        if (val == 1) {
          this.jhpageList = this.jhtableData.slice(0, this.jhsize)
          return
        }
        // 当前页码不为1时
        val = (val - 1) * this.jhsize
        this.jhpageList = this.jhtableData.slice(val, val + this.jhsize)
      },
    getData(){
      this.current = 1
      this.jhcurrent = 1
      this.getDataTable();
    },
  }

树形表格数据多选

setChildren(children, type) {
      // 编辑多个子层级
      children.map(j => {
        this.toggleSelection(j, type)
        if (j.children) {
          this.setChildren(j.children, type)
        }
      })
    },
    // 选中父节点时，子节点一起选中取消
    select(selection, row) {
      const hasSelect = selection.some(el => {
        return row.id === el.id
      })
      if (hasSelect) {
        if (row.children) {
          // 解决子组件没有被勾选到
          this.setChildren(row.children, true)
        }
      } else {
        if (row.children) {
          this.setChildren(row.children, false)
        }
      }
    },
    toggleSelection(row, select) {
      if (row) {
        // 懒加载之后出现的数据，在 tableData 里面的没有的，
        // 懒加载取到的数据，若是不重新赋值给 tableData 对象，在 tableData 中是不会显示这部分数据的。
        // 最主要最主要的一点代码：
        // 将懒加载获取的数据，重新赋值给当前父节点的 children 字段。
        this.$nextTick(() => {
          this.$refs.table &&
            this.$refs.table.toggleRowSelection(row, select)
        })
      }
    },
    // 选择全部
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.jhpageList.map(j => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.jhpageList.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, true)
          }
        })
      }
      if (isCancel) {
        this.jhpageList.map(el => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, false)
          }
        })
      }
    },
    // 获取到选中的
    selectionChange(selection) {
      //console.log(val)
      console.log("获取到选中的")
      console.log("JSON.stringify(selection)：："+JSON.stringify(selection))
      this.ids = selection.map((item) => item.eventId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

树形数据表格涉及到合并列(合并单元格后行高变高的处理)

//通过给table传入span-method方法可以实现合并行或列
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (row.children != undefined) {
          if (columnIndex === 0) {
            return [1, 1]
          }else if(columnIndex === 1) {
            return [1, 9]
          }else{
            return [0, 0]
          }
        }
      },