element-ui tree树形组件自定义实现可展开选择表格

最新推荐文章于 2024-05-08 16:42:58 发布
最新推荐文章于 2024-05-08 16:42:58 发布
阅读量932 收藏 3
点赞数
分类专栏： elementUI js vue
原文链接：https://www.cnblogs.com/steamed-twisted-roll/p/10348471.html
版权
js 同时被 3 个专栏收录
26 篇文章 1 订阅
订阅专栏
vue
24 篇文章 0 订阅
订阅专栏
elementUI
16 篇文章 1 订阅
订阅专栏

原文链接：原文链接
在这里插入图片描述

<template>
  <div>
    <el-dialog
      title="潮流数据"
      :visible.sync="dialogVisible"
      class="invoice-list"
      width="90%"
      :modal-append-to-body="false"
      :before-close="dialogClose"
    >
      <!-- 树形控件 -->
      <ul class="invoice-header">
        <li class="invoice-item">名称</li>
        <li class="invoice-item">类型</li>
        <li class="invoice-item">电压</li>
      </ul>
      <el-tree
        :props="props"
        :data="treeTableData1"
        show-checkbox
        node-key="id"
        ref="treeData"
        @check-change="handleCheckChange"
        @check="handleCheck"
      >
        <!-- 使用自定义,需要加slot-scope,返回两个值,node是当前节点指定的对象
    data是当前节点的数据 -->
        <div class="custom-tree-node" slot-scope="{ data }">
          <div class="total_info_box" v-if="data.span1">
            <span><i>设备类型:</i> {{ data.description }}</span>
          </div>
          <span v-else class="table_info_node">
            <span class="table_info_item">{{ data.name }}</span>
            <span class="table_info_item">{{ data.type }}</span>
            <span class="table_info_item">{{ data.voltage }}</span>
          </span>
        </div>
      </el-tree>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        style="
          background-color: #cccbcb;
          width: 99.5%;
          position: absolute;
          bottom: 0px;
          left: 0px;
          magin-top: 52px;
        "
        @current-change="handleCurrentChange"
        :current-page="queryInfo.num"
        :page-sizes="[10, 50, 100, 500]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <div slot="footer" style="margin-bottom: 35px" class="dialog-footer">
        <el-button type="info" @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="bpaConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      czType: '', //搜索厂站类型
      belongarea: '', //搜索所属调度机构
      belongPartition: '', //搜索所属分区
      areaData: [], //所属分区对应的选择数据
      starttime: '', //搜索开始时间
      endtime: '', //搜索结束时间
      dispatchData: [], //调度机构数组
      dyGrade: '', //搜索电压等级
      czName: '', //搜索厂站名字
      datOrSwi: 'DAT', //查询时候参数，默认DAT
      total: 0, //总条数
      queryInfo: {
        num: 1, //页数
        pagesize: 10, //每页条数
      },

      // 点击选中的bpa或swi数据的id
      idArr: [],
      // 判断手动点击勾选框还是循环后自动选中
      check: 0,
      props: {
        label: 'name', // 需要指定的节点渲染对象属性
        children: 'children', // 指定的子级
      },
      treeTableData: [],
      treeTableData1: [
        {
          id: '001',
          name: '伍次元界',
          type: '异性',
          voltage: 220,
          span1: false,
          description: '南天机器最强界',
          children: [
            {
              id: '002',
              name: '11',
              type: 'qq',
              voltage: 'ss',
              span1: true,
              description: '天空第一',
              children: [
                {
                  id: '003',
                  name: '流星界',
                  type: '烟花',
                  voltage: 110,
                  span1: false,
                  description: '南天机器最强界',
                  children: [
                    {
                      id: '004',
                      name: '琉璃界',
                      type: '烟花',
                      voltage: 110,
                      span1: false,
                      description: '南天机器最强界',
                    },
                    {
                      id: '005',
                      name: '古荥界',
                      type: '烟花',
                      voltage: 110,
                      span1: false,
                      description: '南天机器最强界',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: '0001',
          name: '沧浪界',
          type: '仙人',
          voltage: 220,
          span1: false,
          description: '北部第一界',
        },
      ],
    }
  },
  async mounted() {},
  watch: {},
  methods: {
    bpaConfirm() {},
    // tree组件选择改变事件
    handleCheckChange(value, check, value1) {
      // 使用getCheckedNodes可以获取当前被选中的节点数据
      // let selected = this.$refs.treeData.getCheckedNodes()
    },
    handleCheck(value, value1) {
      this.idArr = value1.checkedKeys.filter((item) => {
        if (item != undefined) {
          return item
        }
      })
    },

    // 监听pagesize
    handleSizeChange(newSize) {
      this.queryInfo.num = 1
      this.queryInfo.pagesize = newSize
      this.queryPlantTree()
    },
    // 监听num
    handleCurrentChange(newnum) {
      this.queryInfo.num = newnum
      this.queryPlantTree()
    },
    // 查询厂站的数据树
    async queryPlantTree() {
      this.treeTableData = []
      const res = await this.$http.get('/plantstation/bpainsertquery', {
        params: {
          plantkey: this.SelectType,
          name: this.czName,
          num: this.queryInfo.num - 1,
          pagesize: this.queryInfo.pagesize,
          voltage: this.dyGrade,
          belongarea: this.belongarea,
          blaerea: this.belongPartition,
          starttime: this.starttime,
          endtime: this.endtime,
          plantvalue: this.czType,
          bpatype: this.datOrSwi,
        },
      })
      this.total = res.data.totalElements
      if (res.status == 200) {
        res.data.content.forEach((item, index) => {
          // 一级循环
          this.treeTableData.push({
            id: item._id,
            name: item.plantStationName,
            type: item.plantStationType,
            voltage: item.plantStationVoltage,
            children: [],
          })
          // 二级循环发电机
          if (item.plantStationAlternatorlist.length !== 0) {
            this.treeTableData[index].children.push({
              id: 1,
              span1: true,
              description: '发电机',
              children: [],
            })
            item.plantStationAlternatorlist.forEach((value, ind) => {
              this.treeTableData[index].children[0].children.push({
                id: value._id,
                name: value.alternatorName,
                type: value.busLineWiringMode,
                voltage: value.alternatorRatedVoltage,
                children: [],
              })
              // 三级循环
              if (value.alternatorDatdataList.length !== 0) {
                value.alternatorDatdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[0].children[
                    ind
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
          // 二级循环变压器
          if (item.plantStationTransformerlist.length !== 0) {
            let len = this.treeTableData[index].children.length
            this.treeTableData[index].children.push({
              id: 2,
              span1: true,
              description: '变压器',
              children: [],
            })
            item.plantStationTransformerlist.forEach((value, ind) => {
              //获取前一次push后当前treeTableData的长度，再次进行第三次循环时从(i+ind)开始push
              let len1 = this.treeTableData[index].children[len].children.length
              this.treeTableData[index].children[len].children.push({
                id: value._id,
                name: value.transformerName,
                type: value.transformerWindingNum,
                voltage: value.transformerHVSRateVoltage,
                children: [],
              })
              // 三级循环
              if (value.transformerDatdataList.length !== 0) {
                value.transformerDatdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[len].children[
                    len1
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
          // 二级循环线路
          if (item.plantStationOutLinelist.length !== 0) {
            let len = this.treeTableData[index].children.length
            this.treeTableData[index].children.push({
              id: 3,
              span1: true,
              description: '线路',
              children: [],
            })
            item.plantStationOutLinelist.forEach((value, ind) => {
              let len1 = this.treeTableData[index].children[len].children.length
              //获取前一次push后当前treeTableData的长度，再次进行第三次循环时cong(i+ind)开始push
              this.treeTableData[index].children[len].children.push({
                id: value._id,
                name: value.aclineName,
                type: value.aclineLength,
                voltage: value.aclineVoltage,
                children: [],
              })
              // 三级循环
              if (value.aclineDatdataList.length !== 0) {
                value.aclineDatdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[len].children[
                    len1
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
          // 二级循环负荷
          if (item.plantStationWeightlist.length !== 0) {
            let len = this.treeTableData[index].children.length
            this.treeTableData[index].children.push({
              id: 4,
              span1: true,
              description: '负荷',
              children: [],
            })
            item.plantStationWeightlist.forEach((value, ind) => {
              //获取前一次push后当前treeTableData的长度，再次进行第三次循环时cong(i+ind)开始push
              let len1 = this.treeTableData[index].children[len].children.length
              this.treeTableData[index].children[len].children.push({
                id: value._id,
                name: value.weightName,
                type: value.weightProTime,
                voltage: value.weightRateVoltage,
                children: [],
              })
              // 三级循环
              if (value.weightDatdataList.length !== 0) {
                value.weightDatdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[len].children[
                    len1
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
          // 二级循环母线
          if (item.plantStationBusLinelist.length !== 0) {
            let len = this.treeTableData[index].children.length
            this.treeTableData[index].children.push({
              id: 5,
              span1: true,
              description: '母线',
              children: [],
            })
            //获取前一次push后当前treeTableData的长度，再次进行第三次循环时cong(i+ind)开始push

            item.plantStationBusLinelist.forEach((value, ind) => {
              let len1 = this.treeTableData[index].children[len].children.length
              this.treeTableData[index].children[len].children.push({
                id: value._id,
                name: value.busLineName,
                type: value.busLineWiringMode,
                voltage: value.busLineRateVoltage,
                children: [],
              })
              // 三级循环
              if (value.datdataList.length !== 0) {
                value.datdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[len].children[
                    len1
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
          // 二级循环新能源
          if (item.plantStationEnergyunitlist.length !== 0) {
            let len = this.treeTableData[index].children.length
            this.treeTableData[index].children.push({
              id: 5,
              span1: true,
              description: '新能源',
              children: [],
            })
            //获取前一次push后当前treeTableData的长度，再次进行第三次循环时cong(i+ind)开始push
            item.plantStationEnergyunitlist.forEach((value, ind) => {
              let len1 = this.treeTableData[index].children[len].children.length
              this.treeTableData[index].children[len].children.push({
                id: value._id,
                name: value.energyunitName,
                type: value.energyunitType,
                voltage: value.energyunitVoltage,
                children: [],
              })
              // 三级循环
              if (value.energyunitDatdataList.length !== 0) {
                value.energyunitDatdataList.forEach((valueDat, i) => {
                  this.treeTableData[index].children[len].children[
                    len1
                  ].children.push({
                    sid: valueDat._id,
                    name: valueDat.model_name_cn,
                    type: valueDat.modeldata,
                    voltage: valueDat._id,
                  })
                })
              }
            })
          }
        })
      }
    },

    async dialogClose() {
      this.dialogVisible = false
      // 关闭前将表格数的data置为空
      this.treeTableData = []
      this.idArr = []
    },
  },
}
</script>

<style lang="less" >
.el-tree {
  overflow-y: auto;
  height: 183px !important;
  border-left: 1px solid rgb(202, 201, 201);
  border-right: 1px solid rgb(202, 201, 201);
  border-bottom: 1px solid rgb(202, 201, 201);
}
.invoice-list {
  border: 1px solid rgb(202, 201, 201);
  margin-top: 10px;
  height: 100%;
  .invoice-header {
    border: 1px solid rgb(202, 201, 201);
    background-color: transparent;
    display: flex;
    list-style: none;
    padding-left: 61px;
    margin: 0;
    border-bottom: 1px solid rgb(202, 201, 201);
    .invoice-item {
      padding: 10px;
      padding-right: 0;
      flex: 1;
      border-left: 1px solid rgb(202, 201, 201);
      padding-left: 10px;
    }
  }

  .el-tree-node__content {
    background: transparent;
    border-bottom: 1px solid rgb(202, 201, 201);
    padding-left: 15px !important;
    height: 40px;
  }

  .el-tree-node__children {
    .el-tree-node__content {
      background: transparent;
      border-bottom: 1px solid rgb(202, 201, 201);
    }
  }
  .custom-tree-node {
    width: 100%;
    height: 100%;
    .total_info_box {
      background: #f2f2f2;
      line-height: 40px;
      span {
        float: left;
        font-size: 12px;
        margin: 0 15px;
        i {
          display: inline-block;
          margin-right: 3px;
        }
      }
    }
    .table_info_node {
      display: flex;
      height: 100%;
      .table_info_item {
        flex: 1;
        height: 100%;
        border-left: 1px solid rgb(202, 201, 201);
        padding-left: 10px;
        line-height: 40px;
      }
    }
  }
}
</style>
Ccoolor
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui自定义树状表格
dhdclsdwdsnxhg的博客
04-16 903
实现自定义的树状表格 <el-table size="mini" :data="tableData1" style="width: 100%" row-key="id" ...
element ui 树形控件tree实现单选功能
前端李小白的博客
11-17 3473
<el-tree ref="tree" class="tree" :props="treeProps" :node-key="'id'" :empty-text="' '" :data="treeData" show-checkbox check-strictly :expand-on-c
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element Ui 树形组件自定义样式与功能
我是一个酒鬼的博客
05-12 4484
Element Ui 树形组件自定义样式与功能，可实现树节点内容修改、增加节点、删除节点等，根据层级不同显示不同的图标等，已封装成组件
el-tree（包含多层级子节点） 结合 el-table（分页表格）实现双向绑定 （支持表格全选当前页 支持表格分页全选 需要后端配合）
最新发布
weixin_49522661的博客
05-08 540
全选区域下面所有的数据 那么 check 以及 del都是为空。map集合 key是存在children的区域id。全选数据后 单选取消 check为空 del不为空。单选数据 check不为空 del为空。有错误的地方 请大佬指教。
自定义ElementUI风格树形组件，详解递归组件的使用及事件数据传递，视图更新等问题
小圣贤君的博客
09-22 2278
组件视图样式 当我们做多级菜单或者权限列表管理的时候，大多会采用树形结构来实现，有的朋友为了省事，不想多费脑力，多费时间，直接几层for循环就做了个差不多的属性组件，更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求，这时，稍微有点要求的产品就来要求了：不行，这组件样式都是竖着的，要是权限列表多了，这还了得？改。 这里笔者仿照ElementUI的风格，自定义了个简单的树形组件，先看样式： 递归组件说明 什么是递归组件？简单的说就是组件自己调用自己。有些朋友可能就懵了，哎呦卧槽，组件还能调
element UI tree 组件 自定义
weixin_43760238的博客
11-26 1421
element-UI tree 组件 修改前面的自定义图标 HTML <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <!-- <i v-if="data.chi
Vue + elementUI 自定义select-tree下拉树组件
法号钦尘的博客
12-23 8054
vue下，elementUI并没有提供选树组件，于是借鉴了网上前端大佬的实现，加上自己在使用过程中发现的一些BUG，做了一些改进。主要可以支持动态表单的特性及v-model，支持禁用，支持放在表单中使用，下面请看代码。
element-ui tree结构实现增删改自定义功能代码
10-14
总的来说，这个示例展示了如何利用Element-UI的Tree组件自定义节点的显示和交互，实现编辑、删除和新增功能。通过监听用户操作，修改数据源（`treeData`），并重新渲染Tree组件，可以达到动态更新树结构的效果。这在...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入...通过深入理解这些API和事件，你可以构建出满足复杂需求的树形组件。
vue+element-ui实现穿梭框数据自定义排序
12-05
Element-UI是基于Vue.js的一套丰富的UI组件库，其中包括了穿梭框组件，它常用于在两个列表之间进行数据的选择和移动。自定义排序功能在实际应用中十分常见，能够提升用户体验，使用户更方便地管理数据。 首先，我们...
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
自定义《element-UI》el-tree 的样式 、亲测管用
热门推荐
技术前端，忠于热爱 @0.活在风浪里
03-15 1万+
自定义《element-UI》el-tree 的样式 、亲测管用
el-tree改成表格样式
m0_65915285的博客
11-17 851
用el-tree改成表格样式
Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能
qq_41623635的博客
07-14 2691
Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点名称功能
Element-ui el-tree组件，自定义折叠展开
weixin_42052678的博客
06-08 1342
element-ui el-tree组件，自定义折叠展开
element-plus2.5.10版本el-table树形数据设置自定义展开收起图标与插槽图标-第一级才设置索引
个人博客
10-28 4599
el-table树形数据，设置自定义展开收起图标与插槽图标-第一级才设置索引
el-table中展示树形数据（需要加图标样式）
weixin_44191318的博客
06-01 1967
el-table中展示树形数据
drag-tree-table实现element table树形表格拖动
06-10
如果您想要实现Element Table树形表格的拖动功能，可以考虑使用Vue.js框架并结合element-ui组件库，再使用一些自定义指令和事件来实现。 以下是一种实现方式： 1. 在Vue组件中引入element-ui组件库，并在模板中使用el-table组件，设置其tree-props属性为{children: 'children', hasChildren: 'hasChildren'}，以支持树形结构。 2. 使用自定义指令v-draggable，在表格行上绑定该指令，使得行可以被拖动。 3. 监听el-table组件的row-drop事件，在该事件中更新数据源，以实现拖拽行的排序。 下面是示例代码： ```html <template> <el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-drop="handleRowDrop" > <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <button v-if="scope.row.hasChildren" @click="toggleNode(scope.row)"> {{ scope.row.expanded ? '收起' : '展开' }} </button> </template> </el-table-column> <el-table-column label="拖动" width="80"> <template slot-scope="scope"> <div v-draggable class="drag-handle"> <i class="el-icon-s-grid"></i> </div> </template> </el-table-column> </el-table> </template> <script> import { directive } from 'vuedraggable' export default { directives: { draggable: directive }, data() { return { tableData: [ { name: '张三', age: 18, address: '北京市朝阳区', children: [ { name: '李四', age: 22, address: '北京市海淀区', children: [], hasChildren: false } ], hasChildren: true }, { name: '王五', age: 30, address: '上海市浦东区', children: [], hasChildren: false } ] } }, methods: { toggleNode(node) { this.$refs.table.toggleRowExpansion(node) }, handleRowDrop(event) { const { treeData, newIndex, oldIndex } = event // 更新数据源 treeData.splice(newIndex, 0, treeData.splice(oldIndex, 1)[0]) } } } </script> <style> .drag-handle { cursor: move; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } </style> ``` 在上面的代码中，我们首先引入了vuedraggable库中的directive指令，并将其作为自定义指令draggable注册到Vue实例中。 在模板中，我们将el-table组件的tree-props属性设置为指定的树形结构字段，以支持树形表格的展示。然后在拖动列中使用v-draggable指令，使得行可以被拖拽。 最后，我们监听了el-table组件的row-drop事件，在事件中更新数据源，以实现行的拖拽排序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值