Tree 树形控件-默认展开和默认选中

为什么用?
权限树的展示,给角色分配权限。
基本使用

<el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="id" // Tree的key:唯一标识
        :default-expanded-keys="[]" // 默认展开的key
        :default-checked-keys="[]" // 默认选中的key
        :props="defaultProps">
</el-tree>
data () {
    return {
      data: [], // 数据源,权限树
      defaultProps: { // 绑定规则
        children: 'children',
        label: 'menuName'
      }
},
methods: {
// 权限树的展示
// 1.发起get请求,获取权限列表,接收一个权限树,绑定到数据源
// 2.发起get请求,根据角色Id,获取拥有的权限,绑定到默认展开项、选中项
// 获取选中的权限,用于提交修改请求
getChecked(){
      // 1.获取选中的key数组
      // 获取选中的全部节点,返回ID数组
      const arr = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      // 获取选中的叶子节点,返回ID数组
      // const arr = this.$refs.tree.getCheckedKeys()
      // 获取选择的一级二级菜单,返回ID数组
      // const arr = this.$refs.tree.getHalfCheckedKeys()
      console.log(arr)
      // 发起put请求
}
}
上一篇:防抖 vue


下一篇:Vue数据修改,页面没有改变 $nextTick()