element ui tree 获取到选中节点

html:
<el-tree
  :data="region"
  :props="defaultProps"
  show-checkbox
  class="list-bt"
  ref="tree"
  :highlight-current="true"
  @check-change="getChecked"
  >
</el-tree>

方法:

 this.$refs.tree.getCheckedNodes()
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要设置 Element UI 中的树形控件默认选中状态,可以通过以下步骤进行操作: 1. 在树形控件的数据源中,找到需要默认选中节点。 2. 在该节点的数据对象中,设置 `checked` 属性为 `true`。 3. 在 `<el-tree>` 标签中,通过 `default-checked-keys` 属性指定需要默认选中节点的 key 值,可以是一个数组或者字符串,多个 key 值之间用逗号分隔。 以下是一个示例代码: ```html <template> <el-tree :data="treeData" :default-checked-keys="defaultCheckedKeys"></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: '节点 1', checked: true, children: [ { id: 2, label: '节点 1-1', checked: false }, { id: 3, label: '节点 1-2', checked: true } ] }, { id: 4, label: '节点 2', checked: false } ] }; }, computed: { defaultCheckedKeys() { return this.treeData .filter(node => node.checked) .map(node => node.id.toString()); } } }; </script> ``` 在上面的代码中,我们将节点 1 和节点 1-2 设置为默认选中状态,节点 2 不选中。`defaultCheckedKeys` 计算属性返回一个数组 `['1', '3']`,其中的 key 值需要是字符串类型,所以我们使用 `toString()` 方法进行转换。这样,打开页面时树形控件中就会默认选中节点 1 和节点 1-2。 ### 回答2: element ui tree 是一款 Vue.js 组件库提供的树形结构组件。 在 element ui tree 中,如果需要默认选中某些节点,可以通过设置 tree 的默认已选择的节点属性,来实现这个需求。 在代码中,我们需要给 tree 中的数据源中的相对应的节点添加一个 selected 属性,并且将其设置为 true,这个节点就会默认被选中了。 例如下面这个代码片段,其中的 data 数组中,我们给第二个节点添加了 selected 属性,并将其设置为 true: ```html <template> <el-tree :data="data" :props="defaultProps" /> </template> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }, { label: '三级 1-1-2', selected: true // 添加 selected 属性并且为 true,表示默认选中节点 }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }, { label: '三级 2-1-2' }] }] }] }; }, defaultProps: { children: 'children', label: 'label' } } </script> ``` 这样,当我们渲染出 element ui tree 组件时,第二个节点“二级 1-1-2”就会默认被选中。 除此之外,在 element ui tree 中,还可以通过通过监听 tree 的 check/change 事件,来改变某个节点选中状态,并将其设置为默认选中。在需要实现多选的场景中,也可以设置一个默认选中节点的数组,通过遍历数组,将这些节点选中状态改变,来实现多选的需求。 总的来说,element ui tree 支持通过设置 selected 属性来实现单选和默认选中的需求,而对于多选的场景,则需要借助 check/change 事件,来动态的改变节点选中状态。 ### 回答3: Element UI是一款常用的Vue.js组件库,其中tree组件作为一种可以展示层次关系数据结构的重要组件之一,其提供默认选中功能可以方便用户操作和快速获取需要的数据。 在Element UI tree中默认选中的实现主要是通过选项属性 defaultCheckedKeys 和 defaultChecked 字段实现。其中 defaultCheckedKeys 属性为初始选中的keys数组,defaultChecked配置为一个方法,该方法接收tree节点和数据对象并返回一个布尔值,true表示选中,false表示不选中。具体实现如下: 1.通过defaultCheckedKeys属性设置默认选中节点,例如设置树的第一层和第二层节点默认选中: ```html <template> <el-tree :data="data" :default-expanded-keys="[1, 2]" :default-checked-keys="[11, 121, 122]" node-key="id" :check-strictly=true :default-checked='defaultChecked' :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-checkbox v-model="data.checked" :disabled="data.disabled"></el-checkbox> </span> </el-tree> </template> <script> export default { data() { return { defaultCheckedKeys: [11, 121, 122], data: [ { id: 1, label: '一级 1', children: [{ id: 11, label: '二级 1-1', children: [{ id: 121, label: '三级 1-1-1', children: [{ id: 1211, label: '四级 1-1-1-1', children:[{ id:12111, label:'五级 1-1-1-1-1' },{ id:12112, label:'五级 1-1-1-1-2' }] }] }, { id: 122, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 21, label: '二级 2-1' }, { id: 22, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 31, label: '二级 3-1' }, { id: 32, label: '二级 3-2' }] } ] } }, methods: { defaultChecked(node, data) { return data.id === 1211 || data.id === 12111 } }, computed: { defaultProps() { return { children: 'children', label: 'label', disabled: 'disabled' } } } } </script> ``` 2.通过defaultChecked配置方法设置默认选中节点,例如设置id为 1211 和 12111两个节点默认选中: ```html <template> <el-tree :data="data" :default-expanded-keys="[1, 2]" node-key="id" :check-strictly=true :default-checked='defaultChecked' :props="defaultProps"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-checkbox v-model="data.checked" :disabled="data.disabled"></el-checkbox> </span> </el-tree> </template> <script> export default { data() { return { data: [ { id: 1, label: '一级 1', children: [{ id: 11, label: '二级 1-1', children: [{ id: 121, label: '三级 1-1-1', children: [{ id: 1211, label: '四级 1-1-1-1', children:[{ id:12111, label:'五级 1-1-1-1-1' },{ id:12112, label:'五级 1-1-1-1-2' }] }] }, { id: 122, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 21, label: '二级 2-1' }, { id: 22, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 31, label: '二级 3-1' }, { id: 32, label: '二级 3-2' }] } ] } }, methods: { defaultChecked(node, data) { return data.id === 1211 || data.id === 12111 } }, computed: { defaultProps() { return { children: 'children', label: 'label', disabled: 'disabled' } } } } </script> ``` 通过以上两种方法可以快速实现Element UI tree的默认选中功能,方便用户快速获取需要的数据,提高交互效率。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值