前言

quasar的树组件的勾选策略在有些时候不太适用，leaf 策略会影响父级的勾选状态，但是无法通过组件提供的api（@update:ticked -> function(target)）去获取勾选的父节点值，只会返回处于勾选状态的的子节点

这里做的改变是获取所有处于勾选状态的节点，并且勾选父节点的时候会子节点会自动勾选，取消父节点勾线的时候，
子节点会自动取消勾选，子节点的勾选状态不会影响父节点的勾选状态
（这里适用于每个节点都对应一条数据的时候使用）
父节点的状态不会根据字节点改变

quasar树组件文档地址
leaf 勾选的节点只是叶子节点。勾选节点也会影响父级的勾选状态（父级会部分勾选或勾选），以及其子级（所有可勾选的子级也会被勾选）。
leaf-filtered 与leaf具有相同的概念，只是该策略仅适用于过滤后的节点（过滤后仍可见的节点）。
strict 勾选节点独立于父级或子级勾选状态。

一、页面

<q-tree:nodes="organinzation"node-key="id"color="grey-7"text-color="grey-7"selected-color="primary"@update:ticked="tickNode":expanded.sync="expanded":default-expand-all="true":ticked="ticked"ref="tree"tick-strategy= 'strict' />

二、script部分

代码如下（示例）：

export default {data() {return {organinzation: [],expanded: [],ticked: [],lastTicked: [],};},mounted() {this.getdata().then((res) => {this.organinzation = Object.assign([], res);this.dataload = true;});},methods: {...mapActions("zhinuo", ["handleNodeGet"]),getdata() {return new Promise((selove, reject) => {this.$showloading(this);this.handleNodeGet({type: "all",}).then((res) => {this.$clearloading(this);if (res.errno == 0) {selove(this.initTree(res.data));} else {selove([]);}});});},initTree(data) {let arr = [];for (let i = 0; i < data.length; i++) {let temp = data[i];let children = [];if (temp.children && temp.children.length > 0) {children = this.treeChildren(temp.children);}arr.push({label: temp.name,id: temp.id,pid: temp.pid,children,});}return Object.assign([], arr);},// 这里是对后台返回的数据进行处理的 吧数据处理成符合树组件要求的数据格式treeChildren(resdata) {let data = [];if (resdata) {for (let i = 0; i < resdata.length; i++) {let item = resdata[i];let havechild = [];//判断是否存在子节点if (item.children && item.children.length > 0) {havechild = Object.assign([], this.treeChildren(item.children));}data.push({label: item.name,id: item.id,pid: item.pid,children: havechild,});}}return data;},//根据节点值获取树数据getObjByID(data, id) {let r = null;for (let i = 0; i < data.length; i++) {let element = data[i];if (element.id == id) {r = element;break;}if (element.children && element.children.length > 0) {r = this.getObjByID(element.children, id);if (r != null) {break;}}}return r;},// 获取当前节点下所有子节点的idgetChildAll(data) {let childrenId = [];function recursion(nodedata) {for (const children of nodedata.children) {childrenId.push(children.id);if (children.children.length > 0) {recursion(children);}}}recursion(data);return childrenId;},// 勾选时触发的方法，主要就是在这里对数据进行处理的tickNode(val) {//  val为当前节点操作之后，树节点中所有处于勾选状态的节点数据//  this.lastTicked也可以在this.ticked = val;之前通过this.ticked 获得，数据是一样的，都是视图更新前勾选的数据this.ticked = val;this.lastTicked = this.$refs.tree.getTickedNodes().map((val) => val.id);// this.$refs.tree.getTickedNodes()获取视图更新前的数据const addTickedNodes = _.difference(val, this.lastTicked);// 通过比较得出此次操作勾选的节点const delTickedNodes = _.difference(this.lastTicked, val);// 通过比较得出此次操作取消勾选的节点if (addTickedNodes.length == 0) {this.optionChoiceLimts(delTickedNodes.join(""), "remove", val);} else {this.optionChoiceLimts(addTickedNodes.join(""), "add", val);}},// 处理树展示的勾选（主要是来做勾选父节点子节点自动勾选和取消父节点子节点自动取消的数据处理）optionChoiceLimts(id, type, val) {let findObj = this.getObjByID(this.organinzation, id);if (type == "remove") {const allchildrenId = this.getChildAll(findObj);const removeAllchild = _.union([Number(id)], allchildrenId);const tickeNode = _.difference(this.lastTicked, removeAllchild);this.ticked = tickeNode;} else {const allchildrenId = this.getChildAll(findObj);const tickeNode = _.union(val, allchildrenId, [Number(id)]);this.ticked = tickeNode;}},},
};//   此时就可以通过this.ticked 获取页面上树节点中所有出游勾选状态的节点了

树数据结构

const treeJson=[{children: [{id: 1,label: "test",pid: 0,children:[]}],id: 1,label: "test",pid: 0}
]

quasar树组件勾选策略改写相关推荐

layui 勾选不联动父项树形控件_layui树形组件重现勾选过程的办法
layui提供了两种初始化节点选中状态的方式一 tree.setChecked('demoId', [2,13,18,19]); //批量勾选 id 为2,13,18,19 的节点其中19是用户真 ...
PrimeNG p-tree 手动添加勾选
Angular+PrimeNG p-tree的勾选 Angular+PrimeNG p-tree 初始化勾选 Angular+PrimeNG p-tree 初始化勾选业务需求,需要多树勾选联动.这就 ...
element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选
当我勾选树状菜单的父级节点的时候,右侧展示对应的子节点. 意思就是只要子节点中包含children属性就不展示,说明不是最终的子节点. 如下图所示. 右侧只展示了最终的子节点而没有展示一级和二级节点. ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点 ...
elementUI组件el-table实现分页、勾选、勾选回显功能
el-table 组件标签中设置row-key属性,:row-key="getRowKey" getRowKey(row) { return row.id } type为selec ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
antd树型选择控件选择父级_element的tree树形菜单回显、父级半勾选
解决的问题: 1. 当拿到了后台的数据,使用id去渲染选中的节点时,如果父级id包含在id数组里,而此id下面的子节点只有部分选中的情况下,此父级id下面得所有子节点全部被选中了. 2. 当需要保存当 ...
vue利用element勾选框样式编写可勾选的卡片组件
需求:1.卡片点击查看详情,添加选中样式,兄弟标签取消样式:2.勾选框全选.反选,勾选样式,判断全选,未全选. 1.HTML 全选 <div class="select-contani ...

quasar树组件勾选策略改写

quasar树组件勾选策略改写

前言

一、页面

二、script部分

树数据结构

quasar树组件勾选策略改写相关推荐

最新文章

热门文章