el-tree中插入图标并且带提示信息

已于 2024-04-01 15:43:42 修改
阅读量1.4k 收藏 1
点赞数
文章标签： vue.js elementui javascript
于 2023-10-08 14:33:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41588991/article/details/133681327
版权 

<template>
  <div class="left">
    <!-- default-expanded-keys 默认展开 -->
    <!-- expand-on-click-node 只有点击箭头才会展开树 -->
    <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="[1]" :expand-on-click-node='false' node-key='menuId'>
      <span class="custom-tree-node box" slot-scope="{ node, data }">
        <span style="flex:1">{{ node.label }}</span>
        <!-- 此处判断，是否展示图标 -->
        <span style="padding-right:10px" v-if="data.menuId === 6">
          <el-tooltip class="item" effect="dark" content="提示文字" placement="top-start">
            <img src="../assets/icon-time.png" style="width: 20px;">
          </el-tooltip>
        </span>
      </span>

    </el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      // 数据源
      list: [
        {
          "menuId": 1,
          "menuName": "首页(首页)",
          "menuCode": "首页",
          "parentId": 0,
          "orderNum": 0,
          "path": "/page",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shouye",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 2,
              "menuName": "首页(首页)",
              "menuCode": "首页",
              "parentId": 1,
              "orderNum": 1,
              "path": "/welcome",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 3,
          "menuName": "随访数据查询(随访数据查询)",
          "menuCode": "随访数据查询",
          "parentId": 0,
          "orderNum": 1,
          "path": "/followUpDataQuery",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shengwuxuejiance",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 4,
              "menuName": "随访数据查询(随访数据查询)",
              "menuCode": "随访数据查询",
              "parentId": 3,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 5,
              "menuName": "随访详情(随访详情)",
              "menuCode": "随访详情",
              "parentId": 3,
              "orderNum": 2,
              "path": "detail",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 21,
          "menuName": "此单名称(11)",
          "menuCode": "11",
          "parentId": 0,
          "orderNum": 1,
          "path": "请问请问饿```",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "321",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": null
        },
        {
          "menuId": 6,
          "menuName": "调查数据查询(调查数据查询)",
          "menuCode": "调查数据查询",
          "parentId": 0,
          "orderNum": 2,
          "path": "/surveyDataQuery",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shaichaxinxichaxun",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 7,
              "menuName": "调查数据查询(调查数据查询)",
              "menuCode": "调查数据查询",
              "parentId": 6,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 8,
              "menuName": "新建问卷(新建问卷)",
              "menuCode": "新建问卷",
              "parentId": 6,
              "orderNum": 2,
              "path": "evaluationreport",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 9,
              "menuName": "随访详情(随访详情)",
              "menuCode": "随访详情",
              "parentId": 6,
              "orderNum": 3,
              "path": "evaluationlook",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 10,
          "menuName": "任务配置(任务配置)",
          "menuCode": "任务配置",
          "parentId": 0,
          "orderNum": 3,
          "path": "/taskSet",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-renwuguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 11,
              "menuName": "任务配置(任务配置)",
              "menuCode": "任务配置",
              "parentId": 10,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 12,
          "menuName": "数据统计(数据统计)",
          "menuCode": "数据统计",
          "parentId": 0,
          "orderNum": 4,
          "path": "/dataStatistics",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-shujutongji",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 13,
              "menuName": "数据统计(数据统计)",
              "menuCode": "数据统计",
              "parentId": 12,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 14,
          "menuName": "数据导出(数据导出)",
          "menuCode": "数据导出",
          "parentId": 0,
          "orderNum": 5,
          "path": "/dataExport",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-suifangrenwuguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 15,
              "menuName": "数据导出(数据导出)",
              "menuCode": "数据导出",
              "parentId": 14,
              "orderNum": 1,
              "path": "index",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        },
        {
          "menuId": 16,
          "menuName": "系统管理(系统管理)",
          "menuCode": "系统管理",
          "parentId": 0,
          "orderNum": 6,
          "path": "/systemManage",
          "component": null,
          "query": null,
          "isFrame": 0,
          "isCache": 0,
          "menuType": 0,
          "visible": 1,
          "perms": null,
          "icon": "iconfont icon-xitongguanli",
          "status": 1,
          "remark": null,
          "roleId": null,
          "selected": true,
          "level": 1,
          "children": [
            {
              "menuId": 17,
              "menuName": "用户管理(用户管理)",
              "menuCode": "用户管理",
              "parentId": 16,
              "orderNum": 1,
              "path": "usersManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 18,
              "menuName": "角色管理(角色管理)",
              "menuCode": "角色管理",
              "parentId": 16,
              "orderNum": 2,
              "path": "roleManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 19,
              "menuName": "权限配置(权限配置)",
              "menuCode": "权限配置",
              "parentId": 16,
              "orderNum": 3,
              "path": "permissionSetting",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            },
            {
              "menuId": 20,
              "menuName": "菜单管理(菜单管理)",
              "menuCode": "菜单管理",
              "parentId": 16,
              "orderNum": 4,
              "path": "menuManage",
              "component": null,
              "query": null,
              "isFrame": 0,
              "isCache": 0,
              "menuType": 1,
              "visible": 1,
              "perms": null,
              "icon": "",
              "status": 1,
              "remark": null,
              "roleId": null,
              "selected": true,
              "level": 2,
              "children": null
            }
          ]
        }
      ],
      defaultExpandedKeys: []
    }
  },
  methods: {
    // 点击树
    handleNodeClick (val) {
      console.log(val);
    }
  }
}
</script>

<style lang="less" scoped>
.left {
  width: 360px;
  margin: 20px;
}
.box {
  display: flex;
  flex: 1;
}
</style>

第二种不带图标

<template>
  <div>
    <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node='false' node-key='id' :default-expand-all="defaultExpandAll">
      <span class="custom-tree-node box" slot-scope="{ node }">
        <span style="flex:1">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },
      defaultExpandedKeys: [0], // 默认展开树
      defaultExpandAll: false, // 默认不展开
      list: [
        {
          "id": 0,
          "orgName": "测试测试测试测试",
          "auditStatus": null,
          "editStatus": null,
          "status": 1,
          "propertys": [1],
          "children": [
            {
              "id": 226,
              "orgName": "000",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": [
                {
                  "id": 227,
                  "orgName": "99",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    2
                  ],
                  "children": null
                },
                {
                  "id": 267,
                  "orgName": "ceshiduankou",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    2
                  ],
                  "children": null
                },
                {
                  "id": 242,
                  "orgName": "肿瘤医院顺义中心",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1
                  ],
                  "children": [
                    {
                      "id": 243,
                      "orgName": "肿瘤医院北京中心",
                      "auditStatus": 2,
                      "editStatus": 1,
                      "status": 1,
                      "propertys": [
                        1
                      ],
                      "children": [
                        {
                          "id": 244,
                          "orgName": "113321",
                          "auditStatus": 2,
                          "editStatus": 1,
                          "status": 1,
                          "propertys": [
                            2
                          ],
                          "children": null
                        }
                      ]
                    }
                  ]
                },
                {
                  "id": 240,
                  "orgName": "恻啥",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1
                  ],
                  "children": null
                },
                {
                  "id": 266,
                  "orgName": "测试机构1",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 241,
                  "orgName": "result",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1
                  ],
                  "children": null
                },
                {
                  "id": 268,
                  "orgName": "宜昌测试医院",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    2
                  ],
                  "children": null
                }
              ]
            },
            {
              "id": 255,
              "orgName": "测试001",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": null
            },
            {
              "id": 254,
              "orgName": "测试创建机构",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": [
                {
                  "id": 262,
                  "orgName": "北京医院1",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 263,
                  "orgName": "北京医院2",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 264,
                  "orgName": "北京医院3",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 265,
                  "orgName": "北京医院4",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 256,
                  "orgName": "下级",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 259,
                  "orgName": "下级测试机构2",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 260,
                  "orgName": "下级测试机构3",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 261,
                  "orgName": "下级测试机构4",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 257,
                  "orgName": "下级机构1",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                }
              ]
            },
            {
              "id": 164,
              "orgName": "测试加2",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 208,
              "orgName": "测试机构111",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 270,
              "orgName": "测试机构展示",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 173,
              "orgName": "测试oss",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 2,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 154,
              "orgName": "测试一下",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2
              ],
              "children": [
                {
                  "id": 206,
                  "orgName": "add",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 1,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 169,
                  "orgName": "丁测试机构0516",
                  "auditStatus": 2,
                  "editStatus": 1,
                  "status": 2,
                  "propertys": [
                    1,
                    2
                  ],
                  "children": null
                },
                {
                  "id": 170,
                  "orgName": "武汉第四人民医院",
                  "auditStatus": 2,
                  "editStatus": 0,
                  "status": 0,
                  "propertys": [],
                  "children": null
                }
              ]
            },
            {
              "id": 269,
              "orgName": "丁0728测试机构",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 245,
              "orgName": "筛查机构",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 274,
              "orgName": "居民服务站",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                4
              ],
              "children": null
            },
            {
              "id": 247,
              "orgName": "oss测试",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": null
            },
            {
              "id": 144,
              "orgName": "四川省肿瘤医院",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2,
                4
              ],
              "children": null
            },
            {
              "id": 212,
              "orgName": "test33",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 174,
              "orgName": "testOSS2",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 2,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 250,
              "orgName": "test_管理",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": null
            },
            {
              "id": 251,
              "orgName": "Test_筛查",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 252,
              "orgName": "Test_筛查1",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 207,
              "orgName": "测试机构",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                2
              ],
              "children": null
            },
            {
              "id": 273,
              "orgName": "应城中医院",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1,
                2
              ],
              "children": null
            },
            {
              "id": 221,
              "orgName": "只存在基本信息",
              "auditStatus": 2,
              "editStatus": 1,
              "status": 1,
              "propertys": [
                1
              ],
              "children": null
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick (val) {
      console.log(val)
    }
  }
}
</script>

<style>
</style>

学不会•
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
elementUI el-tree 自定义节点图标
m0_64491262的博客
06-20 3572
el-tree自定义节点图标
element ui, el-tree, 自定义图标
gaowxx的博客
04-09 573
【代码】element ui, el-tree, 自定义图标。
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
最新发布
2401_84413092的博客
05-01 1550
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给el-tree添加自定义图标
weixin_43258184的博客
05-17 6428
<el-tree v-if="treeVisible" ref="tree" :props="Props" node-key="id" :default-expanded-keys="level" style="height:120vh" :allow-drop="allowDrop" draggable accordio.
vue3+elementPlus：前端自定义el-tree图标icon
热门推荐
意初的博客
09-26 1万+
重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加直接map遍历前端自定义tree图标。
el-tree自定义图标，使用图片或者dom自定义图标，element-plus
阿啵呲嘚的博客
12-02 4572
el-tree自定义图标，基于element-plus，实现完全自定义
vue引入的el-tree前添加图标
qq_45649849的博客
03-11 5636
根据有没有子节点来显示 前面是文件夹还是文件的图标 （因为遇到了就记录了下来） 如果有子节点(children)，就在前面加上一个文件夹的图标(片)，如果没有子节点，就显示的是文件的图标(片) 只有部分代码，在要push的地方添加一个icon，然后动态绑定这个icon，注意名字要一样； <template> <div> <el-tree ref="addre" :load="loNo" :props="default-p..
VUE：el-tree 节点 添加图标
yhj68100055的博客
02-02 2228
VUE：el-tree 节点 添加图标
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
el-tree-selected-tree
11-15
在element-ui中的el-tree上实现单独拉出一棵树来显示树的选中节点，同时可以在该树上删除已选中节点
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
使用＜/el-tree＞组件增加自定义树节点的图标
多看书少吃饭的博客
06-02 3416
使用组件增加自定义树节点的图标
element-plus的Tree 树形控件添加图标
qq_70032585的博客
10-11 2206
- 非第一级且没子元素且选中了是个黄色文件图标 -->-- 非第一级且没子元素且未选中是个文件图标 -->-- 非第一级且有子元素是个文件夹图标 -->{ id: 5, label: "一楼", a: 1 },{ id: 6, label: "二楼", a: 1 },{ id: 7, label: "三楼", a: 1 },-- 第一级固定一个图标 -->label: "一楼",label: "二楼",label: "教学楼",label: "宿舍楼",// 这个打印出来的是node。
el-tree 自定义连线及图标
m0_67793437的博客
08-07 1413
实现的效果如上图。
Element UI-给树形控件添加图标
itmacy的博客
05-17 5243
Element UI -给树形控件添加图标
el-tree组件图标的自定义
Roy__Jason的博客
08-19 3257
el-tree组件图标的自定义
el-tree 饿了么树状控件自定义节点的显示图标
lookingForw_4585的博客
03-01 3713
el-tree 饿了么树状控件自定义节点的显示图标效果展示实现代码替换小三角为图标 效果展示 el-tree组件默认显示时，节点是不带icon的，如需使用时，可以通过自定义插槽的方式来实现，实现方式在网络上也存在很多，本篇只简单记录个人如何实现。 功能点： 替换默认显示的小三角图标 展开即关闭节点时图标切换 子节点的默认显示图标 实现代码 <template> <div class="tree"> <el-tree :data="data5"
el-tree前添加图标，el-tree只从第二级添加图标，el-tree添加增删改图标
weixin_41346436的博客
07-30 3792
el-tree是特别常见的组件，一般要求给每一级文字前面添加图标，从第二级开始添加删除，修改图标 增删改的图标都是当鼠标悬浮在当前节点之上才显示！ 先展示下效果图 第二级添加删除，修改图标 代码结构 <template> <!-- 节点树结构 --> <div class="treeBox"> <el-tree ref="tree"
el-tree动态设置图标
07-28
您可以使用 Element UI 的 el-tree 组件来实现动态设置图标。以下是一个示例代码： ```vue <template> <el-tree :data="treeData" :props="defaultProps" node-key="id"> <span class="custom-icon" slot-scope="{ node }"> <i :class="getIcon(node)"></i> {{ node.label }} </span> </el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: "Node 1", children: [ { id: 11, label: "Node 1-1" }, { id: 12, label: "Node 1-2" } ] }, { id: 2, label: "Node 2" } ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { getIcon(node) { // 根据节点的某个属性值来动态设置图标 if (node.id === 1) { return 'el-icon-folder'; } else if (node.id === 11) { return 'el-icon-document'; } else { return 'el-icon-circle-plus-outline'; } } } }; </script> <style> .custom-icon i { margin-right: 5px; } </style> ``` 在上面的示例中，我们使用了 `slot-scope` 来自定义节点的渲染。通过 `getIcon` 方法，我们可以根据节点的属性值来设置不同的图标。您可以根据自己的需求修改 `getIcon` 方法中的逻辑来动态设置图标。 希望以上信息对您有所帮助！如果您有任何疑问，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学不会•

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值