Vue-Element 树形控件基本使用

最新推荐文章于 2024-07-10 08:30:00 发布

小白-先森

最新推荐文章于 2024-07-10 08:30:00 发布

阅读量1.2k

点赞数 1

分类专栏： Vue技巧笔记文章标签： vue.js elementui

本文链接：https://blog.csdn.net/Allurewuhui/article/details/121641424

版权

本文介绍了如何在Vue项目中使用Element UI的树形控件，详细讲解了基本配置和用法，包括数据绑定、节点操作及事件监听，帮助开发者实现动态交互的树形结构展示。

摘要由CSDN通过智能技术生成

见如下代码

<!-- 树形控件 -->

<el-tree 
      :data="rightsList"  // 绑定渲染树形列表的数据源，定义在data中
      :props="treeProps"  // 设置渲染树形列表的数据结构对象
      show-checkbox // 可选复选框
      default-expand-all // 默认展开全部树形节点
      :default-checked-keys="defKeys" // 默认勾选的节点的 key 的数组
      node-key="id" // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
      >
</el-tree>

<!-- JS代码 -->
data() {
    return {
      // 所有权限的数据，一般通过发送请求获取
      rightsList:[],
      // 树形控件的属性绑定对象
      treeProps:{
        label:'authName', // 作为对应节点的名字显示
        children:'children' // 指定子树为节点对象的某个属性值
      },
      // 默认选中的节点Id值
      defKeys:[],
    };
  },
methods:{

    // 展示分配权限对话框
    async showSetRightDialog(role) {
        // 获取所有权限数据
        const {data:res} = await this.$http.get('rights/tree');
        if(res.meta.status !== 200) {
            return this.$message.error('获取权限失败')
        }