el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数

效果图

我们的数据格式

因为我们的字段和官网提供的字段完全不同,所以需要转换

上代码

   <el-cascaderref="lazytree":show-all-levels="false":options="treeData":props="defaultProps":key="isResouceShow"  // 此处加key是为了在重置查询清空值时不报错@change="handleNodeClick"/>

然后在data里面定义defaultProps

      defaultProps: {label: "nodeName",nodeType: "nodeType",value: "nodeId",children: "childrenList",},

然后接口和处理数据

    // 获取树状采集指标类型async queryTreeList() {try {const res = await queryTreeList();const treeList = [res.data];this.treeData = this.formatData(treeList);} catch (error) {console.log(error);}},// 过滤掉级联选择器空的childrenListformatData(data) {for (var i = 0; i < data.length; i++) {if (data[i].childrenList == null || data[i].childrenList.length == 0) {data[i].childrenList = undefined;} else if (data[i].childrenList.length > 1) {this.formatData(data[i].childrenList);}}return data;},

查询的时候获取选择检点的数据

 // 节点单击事件handleNodeClick() {let nodeData = this.$refs.lazytree.getCheckedNodes();  // 获取点击的节点的数据let datas = nodeData[0].data;this.form.dataitemid = datas.nodeId || "";this.form.dataitemidname = datas.nodeName || "";this.currentDataitemid = datas.nodeId || "";this.queryParams.nodeId = datas.nodeId || "";this.queryParams.nodeType = datas.nodeType || "";this.getList();},

当有需要清空已经选择的值得时候
data里面定义 : isResouceShow: 1,
然后

    /** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");// 清空选中节点和高亮节点this.$nextTick(() => {this.$refs.lazytree.$refs.panel.clearCheckedNodes();this.$refs.lazytree.$refs.panel.activePath = [];});++this.isResouceShow;  // 强制刷新级联选择器,这样就不会报错this.queryParams.nodeId = "";this.queryParams.nodeType = "";this.handleQuery();},

-----------------------------------------------手动分割-----------------------------------------------------------------------

禁用第一个选项

   // 获取设备设施getTreeselect() {queryAllAmAssetsTree().then((res) => {let items = res.data ? res.data : [];const treeList = [items];this.options = this.formatData(treeList);// 遍历第一级的时候不允许点击this.options.forEach((item) => {if (item.nodeType == "company") {item.disabled = true;}});}).catch((err) => {console.log(err);});},

el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数相关推荐

element-ui cascader 级联选择器存最后一级id及回显
:props="{emitPath:false}" 加上这行就可以,只存最后一级id,且以最后一级id完整回显. <el-cascader expand-trigger=&q ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style=" ...
解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...
修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...

el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数

el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数相关推荐

最新文章

热门文章