相信大家对于elementui并不陌生,作为适配Vue的优秀UI框架之一,一直被所有的开发者痛并快乐着。今天要记录的就是里边的主角之一Cascader。
首先先介绍一下Cascader —> 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。
<el-cascader :options="options" clearable></el-cascader>
1、级联选择器经常会用来做地区的选择,在使用过程中发现了第一个有意思的地方—-清空,比如我们经常会给元素添加clearable属性
<el-cascader :options="options" clearable></el-cascader>
正常选中没问题 当点击了清空按钮之后 下拉的面板应该回到之前没选中的状态,但没有回到之前的状态
解决办法:
<el-cascader ref="addressCascader" :props="addressOptions" filterable clearable v-model="selectOptions" @change="addressChange" @visible-change="visibleChange"></el-cascader>
addressChange(data){
if(data && data.length == 0){
this.$refs['addressCascader'][0].$refs.panel.checkedValue = [] // 清空选中值
this.$refs['addressCascader'][0].$refs.panel.clearCheckedNodes() // 清空级联选择器选中状态
this.$refs['addressCascader'][0].$refs.panel.activePath = [] // 清除高亮
this.$refs['addressCascader'][0].$refs.panel.syncActivePath() // 初始化(只展示一级节点)
}
}
2、面板展开可直接看到选中的数据
visibleChange(val) {
if(val) {
if (this.$refs['addressCascader']) {
if(this.$refs['addressCascader'][0].getCheckedNodes()[0]){
this.$refs['addressCascader'][0].$refs.panel.activePath = this.$refs['addressCascader'][0].getCheckedNodes()
}
}
}
}
3、动态加载数据
addressOptions: {
lazy: true,
lazyLoad: (node, resolve) => {
const { level } = node
const nodes = []
let type = level ? level + 1 : 1
this.$http({
url:this.$http.adornUrl('/business', '/dictprovince/selectList'),
method: 'post',
data: { level: type , parentCode: node.value }
}).then(res => {
//console.log("保单归属地", res.data.data)
res.data.data.map(item => {
let area = {
value: item.code,
label: item.name,
leaf: item.level >= 3,
};
nodes.push(area)
})
resolve(nodes)
})
}
}
动态加载数据需要注意的是leaf的值 如果是二级菜单level>=2,三级菜单level>=3
4、后台返回的省市区直辖市选择的时候,针对一、二级的code可能是相同的的情况
code [‘110000’, ‘110000’, ‘110107’],这样的情况在数据新增的时候是没有问题,但是在页面回显的时候例如查看或者修改,el-casder是无法正确的显示选中值的。问题的原因是cascader的每一项id都不能重复
解决办法:例如将props中的value替换为省市区返回数据中的主键id。这种方法可以解决不回显的问题,但是在给后端传值的时候需要见选中的主键id 转换为对应的省市区code。相对比较繁琐
addressOptions: {
value: item.id,
label: item.name,
code: item.code
}
使用如下代码将id转换为对应的code
let pathNodeArray = this.$refs['addressCascader'][0].getCheckedNodes()[0].pathNodes
let pathNodeCodes = []
pathNodeArray.forEach(n => {
pathNodeCodes.push(n.data.code)
})
记录使用当中遇到的问题,不定期更新~
今天的文章element 级联选择器_elementui二级联动下拉框[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/79706.html