2023年6月22日发(作者：)

antdvueTreeSelect树选择的使⽤官⽅⽂档：基本使⽤效果从已有的后端数据⽣成树选择框参考：假设后端数据已经有了但是不符合树选择框的要求，所以我们要进⾏⼀次转化树选择组件data 属性//tree select 树选择treeData: [ { title : '⼀级菜单', value : 0, key : 0 }],method⽅法/** * 树选择框,构造转换，转换后端数据为树形选择需要的数据 * @param data 后端数据 * @returns {[]} 返回结构 */convertToTreedata(data){ //(data, '数据构造........') var returnData = []; //遍历数据 for(var i = 0; i < ; i++){ var tempObj = { title : data[i].title, value : data[i].id, key : data[i].id }; //判断是否存在⼦节点，如果存在则递归 if('child_node' in data[i]){ en = tToTreedata(data[i].child_node); } //push到数据数组中 (tempObj); } return returnData;},//在获取到后端数据之后调⽤//转换var res = tToTreedata();//脱掉⼀层再进⾏(...res);效果单选输⼊搜索启⽤参考：组件设置可勾选(使⽤勾选框实现多选功能)参考：实现代码组件设置 script 导⼊//导⼊import { TreeSelect } from 'ant-design-vue';const SHOW_PARENT = _PARENT;data 导出//勾选框SHOW_PARENT,//tree select 树选择treeData: [],//授权选择authorize_value : [],methods 主要⽅法/** * 树选择框,构造转换，转换后端数据为树形选择需要的数据 * @param data 后端数据 * @returns {[]} 返回结构 */convertToTreedata(data){ //(data, '数据构造........') var returnData = []; //遍历数据 for(var i = 0; i < ; i++){ var tempObj = { title : data[i].title, value : data[i].id, key : data[i].id }; //判断是否存在⼦节点，如果存在则递归 if('child_node' in data[i]){ en = tToTreedata(data[i].child_node); } //push到数据数组中 (tempObj); } return returnData;},//获取授权菜单getAuthorizeMenu(){ g = true; (_APP_API_URL + us).then((data) => { //修改loading 状态 g = false; //数据 = ; //树选择,下拉框重新构造 //转换树菜单选择 var res = tToTreedata(); //脱掉⼀层再进⾏push (...res); // (ta) });},mounted中调⽤//获取授权菜单horizeMenu();效果多选输⼊搜索启⽤参考：组件设置method 实现//多选搜索过滤searchFilterTreeNode(inputValue, treeNode){ /*(inputValue); (treeNode); //组件数据 (); //原数据 ();*/ return ( rCase().indexOf(rCase()) >= 0 );},效果关于勾选获取值的问题使⽤树选择之后，选中⽗节点⼦节点会⼀起选中，但是双向绑定的值只有你选中的⽗节点值，如那下⾯两种情况的勾选值怎么获取呢？获取勾选⽗节点和下⾯勾选的⼦节点的值获取已勾选⼦节点以及半勾选状态的⽗节点的值先看api看这⼏个事件应该是change事件了，打印⼀下选中⽗节点(相当于全选)半勾选看到这⾥，估计就知道怎么获取了change事件的第三个参数是组件属性，属性⾥⾯有个allCheckedNodes属性，这个是个数组，每个数组项都有node和children（如果有⼦项才有），通过这两个属性就可以获取我们想要的值。但是这只能获取获取勾选⽗节点和下⾯勾选的⼦节点的值这种情况的那第⼆种情况怎么获取呢？第⼆种情况需要使⽤select事件，同样是第三个属性有个halfCheckedKeys的数组，这⾥就保存半勾选的⽗节点但是这样⼜出现⼀个问题select事件只会在选中时触发，那如果选中了再取消，这时候⽗节点数据就会有问题，那如何更新⽗节点数据呢？表⽰没找到⽅法我真是⿊⼈问号了......要不就只能⽤下⾯的show_ALL，要不就换Tree树形控件showCheckedStrategy属性解决勾选的问题先看下官⽅解释定义选中项回填的⽅式。_ALL: 显⽰所有选中节点(包括⽗节点).

_PARENT: 只显⽰⽗节点(当⽗节点下所有⼦节点都选中时). 默认只显⽰⼦节点.啥意思，给你看下效果就知道了设置为SHOW_ALLshowCheckedStrategy="SHOW_ALL"效果设置为SHOW_PARENTshowCheckedStrategy="SHOW_PARENT"设置为SHOW_CHILD这三种只有SHOW_ALL是将所有的值获取到，效果没那么好看