Element Ui Tree树形控件中动态设置已选中项

2018-04-10阅读(23248)评论(0)牵着狗狗看MM

苏州实时公交查询

<el-tree ref="tree" :data="resourceData" show-checkbox node-key="id" :default-checked-keys="resourceCheckedKey" :props="resourceProps"></el-tree>


data() {
  return {
    resourceData: [],//数组,我这里是通过接口获取数据,
    resourceDialogisShow: false,
    resourceCheckedKey: [],//通过接口获取的需要默认展示的数组 [1,3,15,18,...]
    resourceProps: {
      children: "subArr",
      label: "chineseName"
    }
  };
},

methods: {
   getKey(id) {
        let that = this;
        let params = {
          roleId: id
        };
        that.$get(this.$api.getConfigure(), params, function (res) {
          if (res.code == "0000") {
            if (res.result) {
              let data = res.result;
              let arr = [];
              for (let item of data) {
                arr.push(item.id)
              }

              that.$refs.tree.setCheckedKeys(arr);//获取已经设置的资源后渲染
            }

          }
        });
   }
}

名词解释

这里照搬官网的说明。
Attributes

参数 说明 类型 可选值 默认值
default-expanded-keys 默认展开的节点的 key 的数组 array

props

参数 说明 类型 可选值 默认值
label 指定节点标签为节点对象的某个属性值 string, function(data, node)
children 指定子树为节点对象的某个属性值 string

方法

方法名 说明 参数
setCheckedKeys 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性 (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false

划重点

ref="tree" 这个一定要设置,不然你会发现打印this.$refs.treeundefined,并且也没法调用setCheckedKeys方法

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Element Ui Tree树形控件中动态设置已选中项
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏