0


Element-UI中el-tree的使用

写项目时经常会遇到使用el-tree的场景,针对用过的,做个简单记录

一,先简单讲一下怎么安装element-ui:

1.安装:

npm i element-ui
  1. 在main.js中引入样式以及组件:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.丢个官网在这里,详细可以去查看:

Element - The world's most popular Vue UI framework

二,el-tree常见属性:

data----用来展示数据

props----树状图配置

label---指定节点标签为节点对象的某个属性值

children---指定子树为节点对象的某个属性值

disabled---指定节点选择框是否禁用为节点对象的某个属性值

show-checkbox---显示选择框

getCheckedKeys----获取当前选中的节点的keys

default-expand-----all-默认展开

check-strictly----设置true,可以关闭父子关联

this.$refs.tree.setCheckedKeys([])-----清空当前的选择

三,如果已经获取到了数据,如何把它填充到el-tree中,让某些个复选框处于选中状态?

(在el-tree组件中通过setCheckedKeys****方法 + node-key将数据 回显到el-tree)

1.给tree补充属性node-key:

  <el-tree
      ref="refTree"
      :data="permissionData"
      :props="{ label: 'name' }"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
+     node-key="id"
    />

2.调用setCheckedKeys:

   async loadRoleDetail() {
      const res = await getRoleDetail(this.roleId)
      console.log('获取角色现有的权限', res.data.permIds)

      // 回填
   +   this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },

(下次继续补充)

标签: ui vue.js

本文转载自: https://blog.csdn.net/GZZ__z/article/details/121003492
版权归原作者 鲜橙多了没 所有, 如有侵权,请联系我们删除。

“Element-UI中el-tree的使用”的评论:

还没有评论