文章目录
最近做项目将之前下拉框改成了element的cascader级联选择,来更清楚展现层级关系,由于之前没有用过cascader,把所有坑踩了个遍,在此记录一下。
首先说明,后端只将原本一起返给选择框的数据改成了有层级的树状结构,由于之前添加修改信息的接口关于这个选择框只存当前选中这级的id,不好意思麻烦后端改,所以在存取信息的时候这个cascader不是数组结构,这里需要进行转换,存的时候通过只存数组最后一个,取的时候要通过最后一级id推前面的父id组成完成数组,进行回显。
选择任意一级选项
element官网上说明
可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
于是我的代码
<el-form-item label="公司" prop="companyId">
<el-cascader
v-model="form.companyId"
placeholder="请选择"
:options="companyOptions"
:props="{ checkStrictly: true }"
/>
</el-form-item>
此处留下了一个坑,关于v-model的,后续会讲到
字段名转换
从官方文档可以看到字段名是value和label
但是后端返回的是id和name
直接赋值,两者会对不上
前端的名字也不是自己定义的,不能直接修改
只能进行转换
<el-form-item label="公司" prop="companyId">
<el-cascader
v-model="form.companyId"
placeholder="请选择"
:options="companyOptions"
:props="optionProps"
/>
</el-form-item>
data() {
return {
companyOptions: [], // 公司
optionProps: {
value: 'id',
label: 'name',
children: 'children',
checkStrictly: true
}
}
}
接口返回数据赋值
if (res.code === 200) {
this.companyOptions = res.data
}
这样选择框就可以显示了,但是我发现,当第三级没有数据的时候,还是会显示出来,上面写的暂无数据
最后一级数据为空显示暂无数据问题
将后端返回的数据先过滤一遍再赋值
if (res.code === 200) {
this.getTypeList(res.data) // 调用方法,去掉无子级数据
this.companyOptions = res.data
}
getTypeList(listData) {
listData.forEach((items) => {
if (items.children.length > 0) {
this.getTypeList(items.children)
} else {
items.children = undefined
}
})
}
这样最后一层无数据就不会被显示了
同时获取cascader的value和label值
给cascader器增加 ref 和 change
<el-form-item label="公司" prop="companyId">
<el-cascader
ref="cascaderCompany"
v-model="form.companyId"
placeholder="请选择"
:options="companyOptions"
:props="optionProps"
@change="selectCompany"
/>
</el-form-item>
selectCompany(val) {
console.log(val, 'value数组')
this.form.companyId = val[val.length - 1] // 从数组中获取id
const checkedNodes = this.$refs['cascaderCompany'].getCheckedNodes() // 获取当前点击的节点
console.log(checkedNodes[0].pathLabels, 'label数组')
this.form.companyName = checkedNodes[0].pathLabels[checkedNodes[0].pathLabels.length - 1] // 从数组中获取name
console.log('id:', this.form.companyId, 'name:', this.form.companyName)
}
绑定change,change里的val值直接就是选中的value值的数组(存放每一级)
const checkedNodes = this.$refs[‘cascaderCompany’].getCheckedNodes() // 获取当前点击的节点
console.log(checkedNodes[0].pathLabels, ‘label数组’)
存放的是选中的label值的数组(存放每一级)
由于接口只传选中的那一级的值,所以我采用了取数组最后一项(这个根据项目自行调整)
这样添加的时候大概没有什么问题了
但是回显的时候之接将res.data里面的id和name值给form会出现bug
发现两个问题:
1、之前v-model留下的坑,点击一次,选中项变蓝,选择框里有选中信息,但是选项前的单项圈并没有选中状态,必须点击两次。(参考下面:选择时双击两次才显示被选中)
2、如果选择的不是第一级,虽然可以正常回显,但是选项前的单项圈并没有选中状态。(参考下面:Cascader组件通过最后一级ID查找匹配的父级ID)
选择时双击两次才显示被选中(单选选择任意一级组件)
点击两次是由于v-model造成的,参考下面这篇文章可以解决
https://blog.csdn.net/weixin_63443983/article/details/126414725?spm=1001.2014.3001.5506
<el-form-item label="公司" prop="companyId">
<el-cascader
ref="cascaderCompany"
:value="valCompany"
placeholder="请选择"
:options="companyOptions"
:props="optionProps"
@change="selectCompany"
/>
</el-form-item>
将v-model换成change存放数据,:value接收数据
由于我之前就是用change,所以影响不大
接收数据
cascader里面添加 :value=“valCompany”
data里声明 valCompany: [ ]
接口返回数据 this.valCompany = res.data.companyId
这样解决了点击两次的问题,但出现一个bug
Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ of null“
Error in callback for watcher “options“: “TypeError: Cannot read property ‘level‘ of null“
下面这篇文章可以解决这个问题,通过加v-if 或者 加key,
我采用了第二种加key和监听的方法
https://blog.csdn.net/weixin_38547641/article/details/118101538
如果想深究,下面这篇讲的更细致
https://blog.csdn.net/weixin_43043994/article/details/100303097?spm=1001.2014.3001.5506
cascader组件通过最后一级ID查找匹配的父级ID
之前说过回显的时候可以正常回显选择框里的内容和选项,但是选项前的单项圈并没有选中状态,这是由于接口存取只有最后一级的id,本来cascader选择器id应该是数组,在我存数据的时候只存了数组的最后一个,其他被我抛弃了,取数据的时候也一样,只有最后一级没有前面的,所以选中的是第一级没有影响,但是非第一级时就会出现问题。
https://www.cnblogs.com/steamed-twisted-roll/p/12659506.html
上面这篇文章和我的情况差不多,可以作为参考