ElementUI Tree组件相关应用整理

最新推荐文章于 2021-12-03 17:43:52 发布
最新推荐文章于 2021-12-03 17:43:52 发布
阅读量279 收藏 1
点赞数
分类专栏： # 前端框架 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42547014/article/details/114277148
版权

1. 普通tree，子节点中添加自定义属性，单击节点获取节点信息

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        data: [{
          "label": "一级",
          "label_en": "yiji",
          "children": [{
              "label": "AAAA",
              "children": [{
                "id": 4,
                "label": "新区县",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            },
            {
              "label": "BBBBB",
              "children": [{
                  "id": 5,
                  "label": "二级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "二级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(236.0,89.0,109.0,0.7)"
                },
                {
                  "id": 6,
                  "label": "二级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "二级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(109.0,151.0,59.0,0.7)"
                },
                {
                  "id": 7,
                  "label": "三级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "三级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(72.0,77.0,9.0,0.7)"
                },
                {
                  "id": 8,
                  "label": "三级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "三级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(240.0,77.0,2.0,0.7)"
                },
                {
                  "id": 9,
                  "label": "集中式水源地保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "沈阳市集中式水源地保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(223.0,174.0,123.0,0.7)"
                },
                {
                  "id": 10,
                  "label": "水源井",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "水源井",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(11.0,81.0,13.0,0.7)"
                },
                {
                  "id": 11,
                  "label": "一级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "一级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(155.0,170.0,192.0,0.7)"
                },
                {
                  "id": 12,
                  "label": "一级保护区_井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "一级保护区_井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(197.0,26.0,63.0,0.7)"
                }
              ]
            },
            {
              "label": "CCCC",
              "children": [{
                "id": 4,
                "label": "三级",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            }
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>

<style>
</style>

在这里插入图片描述

2. 官网上的相关拓展应用

作用代码
显示选择框show-checkbox
点击后高亮highlight-current
初次加载时展开全部default-expand-all
手风琴accordion

在这里插入图片描述

在这里插入图片描述

3. 选择框事件 @check-change=" "

<el-tree :data="data" show-checkbox highlight-current default-expand-all accordion :props="defaultProps" 
    @check-change="handleCheckChange"></el-tree>

handleCheckChange(data, checked, indeterminate) {
        console.log("当前节点："+data);
        console.log("是否为选中状态"+checked)
      }

4. 添加自定义图标及控制图标颜色

(1). tree中添加

<span class="showname" slot-scope="{ node, data }">
    <i :class="data.icon" v-bind:style="{paddingLeft: '4px',color: data.color}"></i>
    <span style="paddingLeft: 4px" :title="node.label">{{node.label}}</span>
</span>

添加后：

<template>
  <el-tree :data="data" show-checkbox highlight-current default-expand-all :props="defaultProps"
    @check-change="handleCheckChange">
    <span class="showname" slot-scope="{ node, data }">
      <i :class="data.icon" v-bind:style="{paddingLeft: '4px',color: data.color}"></i>
      <span style="paddingLeft: 4px" :title="node.label">{{node.label}}</span>
    </span>
    </el-tree>
</template>

(2). data数据中添加

"icon": "el-icon-copy-document"

"color": "rgba(12.0,173.0,102.0,0.7)"

完整数据：

		data: [{
          "label": "一级",
          "label_en": "yiji",
          "children": [{
              "label": "AAAA",
              "children": [{
                "id": 4,
                "label": "新区县",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            },
            {
              "label": "BBBBB",
              "children": [{
                  "id": 5,
                  "label": "二级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "二级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(236.0,89.0,109.0,0.7)"
                },
                {
                  "id": 6,
                  "label": "二级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "二级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(109.0,151.0,59.0,0.7)"
                },
                {
                  "id": 7,
                  "label": "三级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "三级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(72.0,77.0,9.0,0.7)"
                },
                {
                  "id": 8,
                  "label": "三级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "三级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(240.0,77.0,2.0,0.7)"
                },
                {
                  "id": 9,
                  "label": "集中式水源地保护区",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "沈阳市集中式水源地保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(223.0,174.0,123.0,0.7)"
                },
                {
                  "id": 10,
                  "label": "水源井",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "水源井",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(11.0,81.0,13.0,0.7)"
                },
                {
                  "id": 11,
                  "label": "一级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "一级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(155.0,170.0,192.0,0.7)"
                },
                {
                  "id": 12,
                  "label": "一级保护区_井号",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "一级保护区_井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(197.0,26.0,63.0,0.7)"
                }
              ]
            },
            {
              "label": "CCCC",
              "children": [{
                "id": 4,
                "label": "三级",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            }
          ]
        }]

在这里插入图片描述

5. 右击事件，添加右键菜单 @node-contextmenu=" "

  1. 导入 npm install @xunlei/vue-context-menu --save
  2. tree标签中添加右击事件 @node-contextmenu="rightClick"
<el-tree :data="data"  @node-contextmenu="rightClick" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" :filter-node-method="filterNode" default-expand-all style="background-color: #fafafa;margin-left: 10px;" >
  1. tree标签下添加
<el-tree></el-tree>
<vue-context-menu :target="contextMenuTarget" :show="contextMenuVisible" class="right-menu"
        @update:show="(show) => contextMenuVisible = show">
    <a href="javascript:;" @click="createDatabaseOrTable">新建</a>
    <a href="javascript:;" @click="deleteDatabaseOrTable">删除</a>
</vue-context-menu>
  1. 引入VueContextMenu
import { component as VueContextMenu } from '@xunlei/vue-context-menu';

  export default {
    name: 'Test',
    components: {
      'vue-context-menu': VueContextMenu,
    },
    data() {
    	return{
			contextMenuTarget: null,
        	contextMenuVisible: false, // 让菜单显示
		}
    },
}
  1. 添加自定义样式
.right-menu {
    font-size: 14px;
    position: fixed;
    background: #fff;
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 3px;
    z-index: 999;
    display: none;
  }
  .right-menu a {
    width: 150px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: block;
    color: #1a1a1a;
    padding: 2px;
  }
  .right-menu a:hover {
    background: #bbb;
    color: #fff;
  }
  .right-menu {
    border: 1px solid #eee;
    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
    border-radius: 1px;
  }
  a {
    text-decoration: none;
  }

完整代码：

<style>
  .right-menu {
      font-size: 14px;
      position: fixed;
      background: #fff;
      border: solid 1px rgba(0, 0, 0, .2);
      border-radius: 3px;
      z-index: 999;
      display: none;
    }
    .right-menu a {
      width: 150px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      display: block;
      color: #1a1a1a;
      padding: 2px;
    }
    .right-menu a:hover {
      background: #bbb;
      color: #fff;
    }
    .right-menu {
      border: 1px solid #eee;
      box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
      border-radius: 1px;
    }
    a {
      text-decoration: none;
    }
</style>

<template>
  <div>
    <el-tree :data="data" show-checkbox highlight-current default-expand-all :props="defaultProps" @check-change="handleCheckChange"
      @node-contextmenu="rightClick">
      <span class="showname" slot-scope="{ node, data }">
        <i :class="data.icon" v-bind:style="{paddingLeft: '4px',color: data.color}"></i>
        <span style="paddingLeft: 4px" :title="node.label">{{node.label}}</span>
      </span>
    </el-tree>
    <vue-context-menu :target="contextMenuTarget" :show="contextMenuVisible" class="right-menu" @update:show="(show) => contextMenuVisible = show">
      <a href="javascript:;" @click="createDatabaseOrTable">新建</a>
      <a href="javascript:;" @click="deleteDatabaseOrTable">删除</a>
    </vue-context-menu>
  </div>
</template>

<script>
  import {
    component as VueContextMenu
  } from '@xunlei/vue-context-menu';

  export default {
    name: 'Test',
    components: {
      'vue-context-menu': VueContextMenu,
    },
    data() {
      return {
        contextMenuTarget: null,
        contextMenuVisible: false, // 让菜单显示
        data: [{
          "label": "一级",
          "label_en": "yiji",
          "children": [{
              "label": "AAAA",
              "children": [{
                "id": 4,
                "label": "新区县",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            },
            {
              "label": "BBBBB",
              "children": [{
                  "id": 5,
                  "label": "二级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "二级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(236.0,89.0,109.0,0.7)"
                },
                {
                  "id": 6,
                  "label": "二级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "二级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(109.0,151.0,59.0,0.7)"
                },
                {
                  "id": 7,
                  "label": "三级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "三级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(72.0,77.0,9.0,0.7)"
                },
                {
                  "id": 8,
                  "label": "三级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "三级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(240.0,77.0,2.0,0.7)"
                },
                {
                  "id": 9,
                  "label": "集中式水源地保护区",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "沈阳市集中式水源地保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(223.0,174.0,123.0,0.7)"
                },
                {
                  "id": 10,
                  "label": "水源井",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "水源井",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(11.0,81.0,13.0,0.7)"
                },
                {
                  "id": 11,
                  "label": "一级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "一级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(155.0,170.0,192.0,0.7)"
                },
                {
                  "id": 12,
                  "label": "一级保护区_井号",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "一级保护区_井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(197.0,26.0,63.0,0.7)"
                }
              ]
            },
            {
              "label": "CCCC",
              "children": [{
                "id": 4,
                "label": "三级",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            }
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log("当前节点：" + data);
        console.log("是否为选中状态" + checked)
      },
      rightClick(e, data, node) {
        this.treeNodeData = data; // 存当前数据
        this.treeNode = node; // 存当前节点信息
        console.log('rightClick', this.treeNodeData, this.treeNode);
        this.contextMenuVisible = true; // 让菜单显示
        console.log('0', e, '1', e.screenX, '2', e.screenY);
        const ele = document.querySelector('.right-menu');
        ele.style.position = 'fixed';
        ele.style.top = `${e.clientY}px`;
        ele.style.left = `${e.clientX + 10}px`; //根据鼠标点击位置设置菜单出现
      },
      createDatabaseOrTable() {
        this.contextMenuVisible = false;
        console.log('createDatabaseOrTable', this.treeNodeData, this.treeNode);
      },
      deleteDatabaseOrTable() {
        this.contextMenuVisible = false;
        console.log('deleteDatabaseOrTable', this.treeNodeData, this.treeNode);
      },
    }
  };
</script>

实现效果：
在这里插入图片描述

6.右键菜单，自定义菜单内容，并修改tree高亮样式

效果：

在这里插入图片描述

完整代码：

<style>
  * {
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }

  #dataPage {
    margin: 0 0;
    /* text-align: center; */
    color: #2c3e50;
  }

  .right-menu {
    font-size: 14px;
    position: fixed;
    background: #fff;
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 3px;
    z-index: 999;
    display: none;
  }

  .right-menu a {
    width: 150px;
    height: 40px;
    line-height: 28px;
    text-align: center;
    display: block;
    color: #1a1a1a;
    padding: 2px;
  }

  .right-menu a:hover {
    background: #55aaff;
    color: #fff;
  }

  .right-menu {
    border: 1px solid #eee;
    box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);
    border-radius: 1px;
  }

  a {
    text-decoration: none;
  }
   /* 修改选中高亮颜色 */
  .el-tree-node:focus>.el-tree-node__content {
    background-color: #55aaff !important;
    color: #fff;
  }

  .rightClickStyle {
    height: 40px;
    /* background-color: lavender; */
    display: flex;
    line-height: 40px;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #606266;
  }

  .shaixuanClass {
    height: 40px;
    text-align: center;
    line-height: 40px;
  }

  .rightClickStyle h4:hover {
    background: #55aaff;
    color: #fff;
  }

  .shaixuanClass :hover {
    background: #55aaff;
    color: #fff;
  }
</style>

<template>
  <div id="dataPage">
    <el-tree id="el-tree" :data="data" show-checkbox highlight-current default-expand-all :props="defaultProps"
      @check-change="handleCheckChange" @node-contextmenu="rightClick">
      <span class="showname" slot-scope="{ node, data }">
        <i :class="data.icon" v-bind:style="{paddingLeft: '4px',color: data.color}"></i>
        <span style="paddingLeft: 4px" :title="node.label">{{node.label}}</span>
      </span>
    </el-tree>
    <vue-context-menu :target="contextMenuTarget" :show="contextMenuVisible" class="right-menu" @update:show="(show) => contextMenuVisible = show">
      <a>
        <div class="shaixuanClass">
          <el-dropdown>
            <span class="el-dropdown-link" style="display: flex;align-items: center;justify-content: center;">
              <h4>标</h4>
              <h4>&nbsp;&nbsp;&nbsp;&nbsp;</h4>
              <h4>注</h4>
              <h4>&nbsp;&nbsp;&nbsp;&nbsp;</h4><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="nowSelectLayerFieldList" @click.native="selectBiaozhu()">无</el-dropdown-item>
                <el-dropdown-item v-if="nowSelectLayerFieldList" v-for="fieldlist in nowSelectLayerFieldList"
                  @click.native="selectBiaozhu(fieldlist.field_en)">{{fieldlist.field_cn == ""?fieldlist.field_en:fieldlist.field_cn}}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </a>
      <a>
        <div class="rightClickStyle">
          <h4>图层颜色</h4>
          <h4>&nbsp;&nbsp;</h4>
          <el-color-picker size="mini" show-alpha v-model="nowShowLayerColor" @change="changeLayerColor" @active-change="changeActiveLayerColor"></el-color-picker>
        </div>
      </a>
      <a>
        <div class="shaixuanClass">
          <el-dropdown @command="selectoption">
            <span class="el-dropdown-link" style="display: flex;align-items: center;justify-content: center;">
              <h4>筛</h4>
              <h4>&nbsp;&nbsp;&nbsp;&nbsp;</h4>
              <h4>选</h4>
              <h4>&nbsp;&nbsp;&nbsp;&nbsp;</h4><i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="Circle">&nbsp;&nbsp;&nbsp;&nbsp;圆&nbsp;&nbsp;&nbsp;&nbsp;形&nbsp;&nbsp;&nbsp;&nbsp;</el-dropdown-item>
                <el-dropdown-item command="box">&nbsp;&nbsp;&nbsp;&nbsp;方&nbsp;&nbsp;&nbsp;&nbsp;形&nbsp;&nbsp;&nbsp;&nbsp;</el-dropdown-item>
                <el-dropdown-item command="Polygon">&nbsp;&nbsp;&nbsp;&nbsp;多&nbsp;&nbsp;边&nbsp;&nbsp;形&nbsp;&nbsp;&nbsp;&nbsp;</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </a>
    </vue-context-menu>
  </div>
</template>

<script>
  import {
    component as VueContextMenu
  } from '@xunlei/vue-context-menu';

  export default {
    name: 'Test',
    components: {
      'vue-context-menu': VueContextMenu,
    },
    data() {
      return {
        contextMenuTarget: null,
        contextMenuVisible: false, // 让菜单显示
        nowSelectLayerFieldList: [],
        nowShowLayerColor: 'rgba(224, 29, 22, 1)',
        data: [{
          "label": "一级",
          "label_en": "yiji",
          "children": [{
              "label": "AAAA",
              "children": [{
                "id": 4,
                "label": "新区县",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            },
            {
              "label": "BBBBB",
              "children": [{
                  "id": 5,
                  "label": "二级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "二级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(236.0,89.0,109.0,0.7)"
                },
                {
                  "id": 6,
                  "label": "二级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "二级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(109.0,151.0,59.0,0.7)"
                },
                {
                  "id": 7,
                  "label": "三级保护区",
                  "icon": "el-icon-share",
                  "firtype": "sde",
                  "label_en": "三级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(72.0,77.0,9.0,0.7)"
                },
                {
                  "id": 8,
                  "label": "三级保护区井号",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "三级保护区井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(240.0,77.0,2.0,0.7)"
                },
                {
                  "id": 9,
                  "label": "集中式水源地保护区",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "沈阳市集中式水源地保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(223.0,174.0,123.0,0.7)"
                },
                {
                  "id": 10,
                  "label": "水源井",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "水源井",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(11.0,81.0,13.0,0.7)"
                },
                {
                  "id": 11,
                  "label": "一级保护区",
                  "icon": "el-icon-copy-document",
                  "firtype": "sde",
                  "label_en": "一级保护区",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(155.0,170.0,192.0,0.7)"
                },
                {
                  "id": 12,
                  "label": "一级保护区_井号",
                  "icon": "el-icon-more",
                  "firtype": "sde",
                  "label_en": "一级保护区_井号",
                  "order_field": "OBJECTID",
                  "coordinate": 4490,
                  "color": "rgba(197.0,26.0,63.0,0.7)"
                }
              ]
            },
            {
              "label": "CCCC",
              "children": [{
                "id": 4,
                "label": "三级",
                "icon": "el-icon-copy-document",
                "firtype": "sde",
                "label_en": "新区县",
                "order_field": "OBJECTID",
                "coordinate": 4490,
                "color": "rgba(12.0,173.0,102.0,0.7)"
              }]
            }
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      handleCheckChange(data, checked, indeterminate) {
        console.log("当前节点：" + data);
        console.log("是否为选中状态" + checked)
      },
      rightClick(e, data, node) {
        this.treeNodeData = data; // 存当前数据
        this.treeNode = node; // 存当前节点信息
        console.log('rightClick', this.treeNodeData, this.treeNode);
        this.contextMenuVisible = true; // 让菜单显示
        console.log('0', e, '1', e.screenX, '2', e.screenY);
        const ele = document.querySelector('.right-menu');
        ele.style.position = 'fixed';
        ele.style.top = `${e.clientY}px`;
        ele.style.left = `${e.clientX + 10}px`; //根据鼠标点击位置设置菜单出现
      },
      createDatabaseOrTable() {
        this.contextMenuVisible = false;
        console.log('createDatabaseOrTable', this.treeNodeData, this.treeNode);
      },
      deleteDatabaseOrTable() {
        this.contextMenuVisible = false;
        console.log('deleteDatabaseOrTable', this.treeNodeData, this.treeNode);
      },
      changeLayerColor(e) {
        console.log(e)
      },
      changeActiveLayerColor() {

      },
      selectoption(po) {
        console.log(po)
      }
    }
  };
</script>
卑微猿同学
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue树形权限菜单_Vue2.0权限树组件
weixin_34571972的博客
12-30 963
项目使用的饿了么的Element-Ui，权限树使用其树形控件：刚开始没有特殊需求，三级分支，效果看着还可以。但是接下来的新需求：增加页面操作按钮权限，即达到四级分支，同时要求四级权限布局方式为横向，而且操作按钮权限非固定四级树，但是样式要求一致。这样子就很难操作了，如果单单是四级树为横向，还可以调调样式完成。本来想修改element的tree控件源码来实现，网上查了一些资料，还没有很好的办法生成其...
前端-element-ui应用
Input_easy的博客
02-23 152
批量、右键菜单
学习elementUI组件框架
qq_43505774的博客
04-10 366
学习组件框架之前，要有一点vue组件基础，关于组件通信，这点很重要，组件框架全部都是写好的自定义组件，与我们使用的bootstrap不同，bootstrap是基于cssHTML的样式布局，二组件的基于JS的vue框架之上封装的东西，组件的每一个标签，都对应一个vue文件template，style，script，用的最多的是v-bind与v-model，做数据传参与绑定参数，props父级穿子级参...
Element Ui Tree组件使用 选择权限 节点操作
敲代码的伟先生的博客
06-08 1692
工作上使用到element-ui tree 组件，主要功能是数据渲染成树状图，选择节点记录，做到权限设置 官方跳装地址---------Element tree 项目样式 根据角色选择权限 html 部分 <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" :show-close="false"> <el-form :model="editForm" labe
vue+element-ui 对树形组件的一些操作
zjingru的博客
11-15 1045
怀着激动的心颤抖的手写下这篇博客~ 先看需求 设计图如下 左边是一组树形结构的数据 右边是根据tree子节点的checkbox 是true或false 来显示的 右边列表可以删除，删除后左边对应的节点的checkbox为false 看起来需求很简单，但其实这个东西就是很简单，因为一开始思路错了所以花了一点时间，使用element-ui 里的树形组件，认真的看了一下官方文档就写出来了，所以兄弟萌，别百度啊，看文档，文档最仔细了。 然后放上代码 template代码 <!-- :data (绑定的数据
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui tree组件自定义节点使用方法代码详解
10-18
本文通过实例代码给大家介绍了Element-ui tree组件自定义节点使用方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
ElementUI Tree 树形控件的使用并给节点添加图标
10-15
主要介绍了ElementUI Tree 树形控件的使用并给节点添加图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI Tree 树形控件的官方使用文档
12-29
Tree 树形控件—官方文档地址 用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 <el data=data props=defaultProps node-click=handleNodeClick></el> [removed] export default { data...
elementUI table组件
11-09
elementUI table组件 使用vue组件编写的el-table 反正就是一个表格组件， ref="table" v-loading="pageParm.loading" :max-height="pageParm.tableHeight || undefined" :data="data" :default-expand-all=...
vue+element-ui，树形表格，可以做权限管理模块，可折叠，全选，部分全选
热门推荐
阿之阿佐
07-13 4万+
html部分： class="role-table col-xs-offset-2 col-md-offset-1 col-sm-offset-2"> class="header"> class="left">菜单列表 class="right">功能权限 class="vertical-line"> v-for="(item
【Vue】实战项目：电商后台管理系统（Element-UI）（三）权限管理模块
YK菌的博客
03-14 1919
文章目录1. 权限管理业务分析2. 权限列表2.1 通过路由展示权限列表组件2.2 面包屑导航+卡片视图2.3 调用API获取权限列表的数据2.4 渲染权限列表UI结构3. 角色列表3.1 通过路由展示角色列表组件3.2 绘制基本布局结构并获取列表数据3.3 渲染角色列表数据3.4 添加角色+编辑+删除操作3.5 通过第一层for循环渲染一级权限 1. 权限管理业务分析 通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配 一个特定的角色，角色包括不同的功能权限。
element-ui tree树形组件自定义实现可展开选择表格
as965874的博客
12-28 924
原文链接：原文链接
vue elementui 树形权限勾选 父级半联动
wodecc_u的博客
09-17 322
角色添加 <label>权限</label> <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-tree class="m-role-tree m-width" ref="tree" :data="data" show-checkbox node-key="menuId" :default-expanded-keys="opend
Elemtent多选择框权限控制多选择框
xiaoHelloWord的博客
10-25 260
直接上代码 <div> <div class="JuesCheack"> <el-collapse accordion> <el-collapse-item v-for="(item,index) in newTreeList" :key="index"> <template slot="title"> <el-checkbox-gr...
记录element-ui中el-checkbox-group的坑
weixin_46032200的博客
05-29 1599
需求：打开这个dialog时，自动选择已有的选项。在input框中可以搜索 问题：在el-checkbox中使用checked来表示默认选中状态。第一次打开正常，在搜索一次之后，清空input框，自动选择所有的选项。 解决办法： 不必在el-checkbox中设置checked，直接将需要默认选中的选项放到el-checkbox-group中v-model所绑定的数组中即可。 ...
element-ui el-tree 组件添加右键菜单
Sbaby~的博客
02-25 1万+
在 github 上有一个 vue-context-menu 项目实现了以上功能。具体使用在项目的README.md 中写的十分清楚了。 我的实现效果如图： 实现代码如下： <template> <div> <div id="dataPage"> <el-tree :data="data" id="el-tree" :p...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
Tree 树形控件
weixin_30855761的博客
03-14 2634
用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 2 3 <script> 4 export default { 5 d...
elementui tree组件回显
最新发布
06-28
### 回答1： elementui tree组件的回显可以通过以下步骤实现： 1. 在tree组件中设置v-model属性，绑定一个数组，用于存储选中的节点数据。 2. 在mounted生命周期中，通过接口请求获取已选中的节点数据，将数据添加到v-model绑定的数组中。 3. 在tree组件中设置default-checked-keys属性，将已选中的节点的key值传入，实现回显。 4. 当用户进行节点选择操作时，需要将选中的节点数据同步到v-model绑定的数组中，以便在下次回显时能够正确显示已选中的节点。 以上是elementui tree组件回显的基本实现方式，具体实现还需要根据具体业务需求进行调整。 ### 回答2： elementui tree组件是一个常用的树形结构组件，常用于展示页面导航、分类、目录等方式。在开发过程中，经常需要将一些数据以树形结构的方式进行展示，而elementui提供了tree组件来实现这种需求。如果想要实现回显的效果，需要对tree组件进行一些操作。 首先，需要创建一个tree组件，用来展示需要回显的数据。在组件的data属性中定义一个树形结构数组，来保存需要展示的节点信息。同时，定义一个checkedKeys属性，用来保存已选中的节点信息。这样，当tree组件渲染时，会将已选中的节点标记为选中状态，并展示在页面上。 接下来，需要在mounted生命周期方法中，获取需要回显的数据，并将其转化为树形结构数组。然后，将该数组赋值给tree组件的data属性，从而让tree组件展示该数据。 最后，需要将已选中的节点信息设置到checkedKeys属性中，以实现回显效果。可以通过遍历数据数组来获取已选中的节点信息，并将其存储到checkedKeys属性中，从而让tree组件自动选中这些节点。 总之，要实现elementui tree组件的回显效果，需要首先创建一个tree组件，然后在mounted生命周期方法中获取需要回显的数据，并将其转化为树形结构数组。最后，将已选中的节点信息设置到checkedKeys属性中，以实现回显效果。这样就可以在应用中使用elementui tree组件来展示完整的导航、分类、目录等信息，同时满足用户对于回显效果的需求。 ### 回答3： elementui是一个非常实用的UI框架，它提供了很多现成的组件，其中tree组件是一个很常用的组件。在使用tree组件时，我们经常需要根据后端返回的数据来回显tree数据。那么具体如何进行回显呢？ 首先，我们需要知道tree组件的数据结构。elementui的tree组件数据结构采用树形结构，每个节点都包含一个label字段和一个children字段，children字段是一个数组，可以包含多个层级。例如： ```js { label: '父节点1', children: [ { label: '子节点1' }, { label: '子节点2' } ] } ``` 当我们需要回显树状结构时，我们需要根据后端返回的数据来设置tree组件的数据源（即props中的data）。假设后端返回的数据结构为： ```js [ { id: 1, name: '父节点1', children: [ { id: 2, name: '子节点1' }, { id: 3, name: '子节点2' } ] } ] ``` 我们可以通过递归的方式来构建tree组件的数据源，具体步骤如下： 1. 定义递归函数：我们先定义一个递归函数，用于递归构建树形结构。函数的参数包括数据源（data）和当前节点的父节点（parent）。parent默认值为null，表示当前节点是根节点。函数返回值为一个数组，表示当前节点的所有子节点。 ```js function buildTreeData(data, parent = null) { let treeData = [] data.forEach(item => { let node = { label: item.name, id: item.id, parent: parent } if (item.children && item.children.length > 0) { node.children = buildTreeData(item.children, item.id) } treeData.push(node) }) return treeData } ``` 2. 调用递归函数：在页面中，我们获取后端返回的数据，然后调用递归函数来构建tree组件的数据源。构建完成后，将treeData赋值给tree组件的data属性即可。 ```js <template> <el-tree :data="treeData" /> </template> <script> export default { data() { return { treeData: [] } }, mounted() { // 模拟后端返回的数据 let data = [ { id: 1, name: '父节点1', children: [ { id: 2, name: '子节点1' }, { id: 3, name: '子节点2' } ] } ] // 构建tree组件的数据源 this.treeData = buildTreeData(data) }, methods: { // 定义递归函数 buildTreeData(data, parent = null) { let treeData = [] data.forEach(item => { let node = { label: item.name, id: item.id, parent: parent } if (item.children && item.children.length > 0) { node.children = buildTreeData(item.children, item.id) } treeData.push(node) }) return treeData } } } </script> ``` 通过以上步骤，就可以很方便地完成tree组件的回显。当然，实际使用时还需要根据具体情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值