ElementUI 自定义 Tree 树形控件背景;Tree 树形菜单组件

文章介绍了如何在Vue项目中使用el-tree组件创建自定义树形菜单,包括数据结构、模板和CSS样式定制,以及处理节点点击事件的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自定义 Tree 树形控件背景

在 template 中

<div class="tree-box">
  <el-tree :data="treeList" :props="defaultProps" accordion @node-click="handleNodeClick" />
</div>

在 script 中

treeList: [
  { id: "-1", label: "区域选择" },
  { id: "0", label: "全市" },
  {
    id: "1",
    label: "南明区",
    children: [{ id: "1-1", label: "花果园" }]
  },
  {
    id: "2",
    label: "观山湖区",
    children: [
      { id: "2-1", label: "长岭街道办" },
      { id: "2-2", label: "金阳街道办" },
      { id: "2-3", label: "金华镇" },
      { id: "2-4", label: "金华园街道办" }
    ]
  }
],
defaultProps: { children: "children", label: "label" },
handleNodeClick(e) {
  console.log(e.id);
},

在 style 中

.tree-box {
  width: 200px;
}
.el-tree-node__content {
  padding: 5px 0;
  border: 1px solid #ebf0f3;
}
.el-tree-node.is-current > .el-tree-node__content .el-tree-node__expand-icon {
  color: #0c5cff;
}
.el-tree-node__content:hover {
  color: #0c5cff;
  background: #e0eaff;
}
.el-tree-node.is-current > .el-tree-node__content {
  color: #0c5cff;
  background-color: #e0eaff;
}
.el-tree-node__expand-icon.is-leaf {
  color: transparent !important;
}

Tree 树形菜单组件

在 template 中

<tree-menu
  key="menu1"
  high-prefix="max"
  high="1039"
  title="区域"
  :tree-list="areaList"
  :default-expanded-keys="['0']"
  @nodeClick="areaChoose"
/>

在 script 中

/* 树形菜单 */
areaList: [
  {
    id: "0",
    label: "全市",
    children: [
      {
        id: "1",
        label: "南明区",
        children: [{id: "1-1", label: "花果园"}]
      },
      {
        id: "2",
        label: "观山湖区",
        children: [
          {id: "2-1", label: "长岭街道办"},
          {id: "2-2", label: "金阳街道办"},
          {id: "2-3", label: "金华镇"},
          {id: "2-4", label: "金华园街道办"}
        ]
      }
    ]
  },
], // 区域
/* 树形菜单 */
areaChoose(e) {
  // 区域菜单
  console.log(e)
},

组件源码

<!-- 树形菜单 -->
<template>
  <div class="tree-box box-roll-vertical" :style="`${highPrefixCalc(highPrefix)}height: ${high}px`">
    <div class="top-tip">{{ title }}</div>
    <el-tree
      :data="treeList"
      :props="treeProps"
      :node-key="nodeKey"
      :default-expand-all="defaultExpandedKeys.length > 0 ? false : defaultExpandAll"
      :default-expanded-keys="defaultExpandedKeys"
      :accordion="accordion"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
export default {
  props: {
    /** 菜单最大高度
     * 默认:324,单位px
     */
    high: {
      type: [Number, String],
      default: 324
    },
    /** 高度前缀
     * 默认:"",可取值:max(最大高度),min(最小高度)
     */
    highPrefix: {
      type: String,
      default: ''
    },
    /** 顶部标题
     * 默认:""
     */
    title: {
      type: String,
      default: ""
    },
    /** 配置选项
     * 默认:{children: "children", label: "label"}
     */
    treeProps: {
      type: Object,
      default: () => ({children: "children", label: "label"})
    },
    /** 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的(默认展开的节点的 key 的数组中的 key 值就是 nodeKey 这个值)
     * 默认:id
     */
    nodeKey: {
      type: String,
      default: "id"
    },
    /** 是否默认展开所有节点
     * 默认:false
     */
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    /** 默认展开的节点的 key 的数组
     * 默认:[]
     */
    defaultExpandedKeys: {
      type: Array,
      default: () => ([])
    },
    /** 是否每次只打开一个同级树节点展开
     * 默认:true
     */
    accordion: {
      type: Boolean,
      default: true
    },
    /** 展示的数据
     * 默认:[]
     */
    treeList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {}
  },
  methods: {
    /** 高度前缀计算
     * @param e
     */
    highPrefixCalc(e) {
      let result = ''
      if (e === 'max' || e === 'min') result = `${e}-`
      return result
    },
    /** 节点被点击时的回调
     * @param e 返回值
     */
    handleNodeClick(e) {
      this.$emit("nodeClick", e)
    }
  }
}
</script>

<style lang="scss" scoped>
$baseColor: #D0EEFF; // 字体颜色
$baseBg: rgba(16, 33, 48, 0.4); // 背景颜色
$selectedBg: rgba(16, 33, 48, 0.4); // 选中时的背景颜色
.tree-box {
  width: 420px;
  .top-tip {
    color: $baseColor;
    font-size: 24px;
    padding: 8px 16px;
    background: rgba(112, 204, 255, 0.2);
    backdrop-filter: blur(10px);
    font-weight: bold;
  }
  .el-tree {
    background: $baseBg;
  }
  ::v-deep .el-tree-node__expand-icon {
    font-size: 34px;
    color: $baseColor;
  }
  ::v-deep .el-tree-node__expand-icon.is-leaf {
    color: transparent;
  }
  ::v-deep .el-tree-node__content {
    height: 64px;
    backdrop-filter: blur(10px);
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content,
  ::v-deep .el-tree-node__content:hover {
    background: $selectedBg;
  }
  ::v-deep .el-tree-node__label {
    color: $baseColor;
    font-size: 24px;
    font-weight: bold;
  }
}
/* 上下滚动条 */
.box-roll-vertical {
  overflow-y: auto;
  overflow-x: hidden;
}
.box-roll-vertical::-webkit-scrollbar {
  width: 2px;
}
.box-roll-vertical::-webkit-scrollbar-track,
.box-roll-vertical::-webkit-scrollbar-thumb:hover {
  background: #f2f2f2;
}
.box-roll-vertical::-webkit-scrollbar-thumb,
.box-roll-vertical::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.2);
}
</style>
### ElementUI 树形控件使用教程 #### 1. 基础配置与引入 为了在项目中使用 `el-tree` 控件,需先安装并引入 Element UI 库。如果采用按需加载的方式,则只需单独引入所需的组件即可。 ```javascript import { Tree } from 'element-ui'; Vue.use(Tree); ``` #### 2. 数据准备 树形结构的数据通常由节点对象数组构成,每个节点可以拥有子节点属性 `children` 来表示下一层级的内容[^1]。 ```json [ { "label": "一级 1", "children": [ {"label": "二级 1-1"}, {"label": "二级 1-2"} ] }, ... ] ``` #### 3. HTML 结构定义 通过 `<el-tree>` 标签创建树形控件实例,并绑定数据源以及设置其他必要参数。 ```html <template> <div class="demo"> <el-tree :data="data" show-checkbox node-key="id"></el-tree> </div> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1' }, { label: '二级 1-2' }] }] }; } }; </script> ``` #### 4. 属性说明 | 参数 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | data | Array<Object> | [] | 配置项,指定状图显示的数据集 | | props | Object | {} | 自定义属性映射关系,默认为 `{value:'id', label:'label'}`| | check-on-click-node | Boolean | false | 是否允许点击节点触发选中事件 | 对于更复杂的场景,比如需要支持多选框的树形菜单或多级联动效果,可以通过自定义插槽来自定义渲染逻辑,同利用 `check-change` 等事件监听器处理交互行为[^2]。 #### 5. 实现多级联动 当涉及到父子节点之间的关联操作,可以在父节点的选择状态发生变化自动调整其所有后代节点的状态;反之亦然。这可通过监听 `node-click` 或者 `check-change` 事件来完成。 ```javascript methods: { handleCheckChange(data, checked, indeterminate) { this.$refs.tree.store.setCheckedKeys([]); if (checked) { const keys = []; function traverse(node){ keys.push(node.id); if(node.children && node.children.length > 0){ node.children.forEach(traverse); } } traverse(data); this.$refs.tree.setCheckedKeys(keys); } } } ``` #### 6. 添加增删改功能 为了让用户能够直接修改中的信息,在模板内添加按钮用于执行这些动作,并相应地编写 JavaScript 方法来进行实际的操作。注意要同步更新视图和后台存储的数据[^3]。 ```html <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini">Append</el-button> <el-button @click.stop.prevent="remove(node,data)" type="text" size="mini">Delete</el-button> </span> </span> ``` ```javascript append(data) { const newChild = { id: id++, label: 'testtest', children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); }, remove(node, data) { const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex(d => d.id === data.id); children.splice(index, 1); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值