vue el-tree树形结构的check-strictly属性

element ui 的Tree 树形控件用起来其实很简单,如下:

<el-tree show-checkbox default-expand-all check-strictly
     :data="roleResTree" :props="roleDefaultProps" node-key="id" 
     ref="tree" :default-checked-keys="resourceCheckedKey">
</el-tree>

其中,:data表示填充的数据,数据格式如下:
在这里插入图片描述
show-checkbox:表示节点是否可被选择

check-strictly:表示在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。

check-strictly 为 false 时,如下所示:
在这里插入图片描述
在这里插入图片描述
check-strictly 为 true 时,如下所示:
在这里插入图片描述

Vue3中的`Element Tree (el-tree)`是一个基于Element UI的组件,用于展示层级结构的数据,支持多选功能。当涉及到二级可选择或多选框反填(即从用户的选择反向填充数据结构),你可以这样做: 1. 安装并引入组件:首先,在你的Vue项目中安装`element-ui`和`vue-element-tree`库。 ```bash npm install element-ui vue-element-tree ``` 然后,在`main.js`或其他引用依赖的地方导入组件: ```javascript import { ElTree } from 'element-ui/packages/tree'; // 或者 import ElTree from 'vue-element-tree/dist/index.js'; ``` 2. 使用ElTree组件:在模板部分,创建一个ElTree组件,并设置必要的属性如`data`, `props`等。对于多选功能,可以设置`check-strictly`属性为`false`,允许随意切换节点的选中状态。 ```html <template> <el-tree :data="treeData" node-key="id" ref="treeRef" :props="{ children: 'children', label: 'name' }" check-strictly="false" <!-- 允许非严格多选 --> @node-click="handleNodeClick" @check-change="handleCheckChange" ></el-tree> </template> ``` 3. 处理节点点击和状态变化:在`methods`中定义两个处理函数,`handleNodeClick`用于处理节点点击事件,更新节点状态;`handleCheckChange`则用于监听节点选中状态的变化,将选定的节点ID存储到数组或其他合适的数据结构中。 ```javascript export default { data() { return { treeData: [], // 根据实际数据填充 selectedIds: [] // 存储被选中的节点ID }; }, methods: { handleNodeClick(node) { if (node.indeterminate || node.checked) { this.$refs.treeRef.setCheckedKeys([node.id], true); } }, handleCheckChange(data) { this.selectedIds = data.filter(item => item.checked); } } } ``` 4. 反填数据:当你需要根据用户的选择反填数据,可以根据`selectedIds`数组访问原始数据,构建新的数据结构。 ```javascript updateDataStructure() { const selectedNodes = this.treeData.filter(node => this.selectedIds.includes(node.id)); // 根据需求调整这里,可能是合并、移除等操作 // 更新this.treeData 或者其他变量 } ```
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值