安徽工业大学两学一做网站,中企动力科技股份有限责任公司,微信小程序模板大全,手工做皮具国外的网站element-ui出的treeselect下拉树组件基本使用#xff1a;Vue通用下拉树组件riophae/vue-treeselect的使用-CSDN博客
vue-treeselect 问题合集、好用的树形下拉组件#xff08;vue-treeselect的使用、相关问题解决方案#xff09;-CSDN博客
需求1#xff1a;treeselect下拉…element-ui出的treeselect下拉树组件基本使用Vue通用下拉树组件riophae/vue-treeselect的使用-CSDN博客
vue-treeselect 问题合集、好用的树形下拉组件vue-treeselect的使用、相关问题解决方案-CSDN博客
需求1treeselect下拉树组件只能选择叶子节点其他父节点均为点击展开功能不选中
v-model绑定的值要设为null,不能设为 否则会回显unknown
options属性为绑定的树
normalizer就是把我们自己的后端返的数据格式按树插件需要的格式转换
select为选中某个节点时触发
disable-branch-nodes属性是禁用节点属性针对需求1这个属性一定要设置否则不生效 treeselectv-modelpartId:optionsicdTree:normalizertenantIdnormalizerPartnoOptionsText暂无数据placeholder请选择 selectpartChange:disable-branch-nodestrue/treeselect//获取tree数据时就要递归tree标记叶子节点了getIcdDict({level:1}).then(res {const temp res.datathis.markLeafNodes(temp)this.icdTree templet findItem this.getNode(this.icdTree,diagnosisId,curBtn[0].searchKey.bodyId[0])this.partId findItem.diagnosisId})//标记叶子节点方法markLeafNodes(list) {list.forEach(item {item.show falseif(item.children.length 0){item.isLeaf true}else{this.markLeafNodes(item.children)}})},//递归tree找到某个节点对象getNode(data, key, value) {let result null;let fn function (d) {if (Array.isArray(d)) { // 判断是否是数组for (let i 0; i d.length; i) {const e d[i];if (e[key] value) { // 数据循环每个子项并且判断子项下边是否有id值result e; // 返回的结果等于每一项break;} else if (e.children) {fn(e.children); // 递归调用下边的子项}}}}fn(data); // 调用一下return result;},tenantIdnormalizerPart(node, instanceId) {if (node.children !node.children.length) {delete node.children; }//这里判断node节点如果是叶子节点则设置当前节点的isDisabled属性为false节点不禁用可选if(node.isLeaf){node[isDisabled] false;}return {id: node.diagnosisId,label: node.diagnosisContent,children: node.children,};},
需求2treeselect下拉树组件叶子节点添加按钮功能
参考文章12.element-ui组件 el-tree 树菜单 鼠标滑过mouseentermouseleave移入移出节点显示操作按钮 新增删除等(element)_el-tree-select 鼠标移入事件-CSDN博客
需要用到treeselect组件的插槽slotoption-label
插槽slot“option-label” 是下拉框的值
插槽slot“value-label” 是输入框回显的值
接上面代码 treeselectv-modelpartId:optionsicdTree:normalizertenantIdnormalizerPartnoOptionsText暂无数据placeholder请选择 selectpartChange:disable-branch-nodestruediv slotoption-label slot-scope{ node} mouseoverhandleMsenter(node) mouseleavehandleMsLeave(node)spanspan{{ node.label }}/spanspan v-shownode.show node.isLeaf sizesmall typetext stylemargin-left:50px;color:#1890ff mousedownmsAdd(node)添加/span/span/div/treeselect
//注意此处添加按钮如果使用el-button和click事件那么点击事件是不会被触发的此处使用span标签mousedown事件就可以成功触发事件。handleMsenter(node){this.$set(node,show,true)},handleMsLeave(node){this.$set(node,show,false)},msAdd(node){//添加事件todo....},
