Cascader 级联选择器回显(两种方法)(cascader获取选中的值)
前言
昨天后端告诉我说需要加一个编辑功能，接口已经写好了，然后让我添加一个编辑弹窗，我想这不是很简单的东西，然后很快就写好了弹窗，顺便把编辑的数据也展示了一下，然后在展示级联选择器的数据的时候，遇到了各种让我头大的问题，一个字要命
回显实现
第一种方法
直接通过数据绑定来进行回显
<el-cascader v-model="queryParamse.field"//后端返回的数据 :props="props" ref="tree" @change="handleSelect" :show-all-levels="false" :clearable="true" ></el-cascader> 复制代码
结果回显失败。。。，后端就返回了最后一项的id,第一、第二项的id都没有，然后我也思考了一下，感觉通过第三级选项去拿第一、第二级选项，要不要这么麻烦？？
看到只有第三级id的时候，我打算和后端商量一下，在我的恳求下，后端总算同意给我加一个字段，放上第一第二第三级的id，然后给我了一个数组 (PS:感觉自己好卑微~~~~）
获取字段
通过拿去后端给的数组，对自己的代码进行更改，进行回显
<el-form-item label="领域"> <el-cascader v-model="titmre" //绑定回显数组 :props="props" ref="tree" @change="handleSelect" :show-all-levels="false" :clearable="true" ></el-cascader> //拿取回显数据 titmre: [], this.titmre = response.data.results[this.editId].children; //editId为index的值 //当点击提交以及取消时，清空数组 this.titmre = [] 复制代码
回显成功
遇到bug
本以为到这里就结束了，结果突然发现问题，那就是点击第一条数据的时候可以回显，但是点击第二条数据的时候，就回显失败，但是可以拿到数据，如下：
打开选择框，发现是第一条数据的选项仍在，所以第二条数据虽然拿到了，但是没有办法展示
所以需要清除一下上一条数据的选项，看了一下文档，使用clearCheckedNodes()方法可以清除选项，结果。。。使用失败
百度了很久，试了很多方法，之后直接放弃使用官方的方法
解决
既然只有进入页面后的第一次点击弹窗可以正确显示，那么，是不是相当于重新加载了一遍编辑弹窗，所以可以通过销毁弹窗来实现选项的清空，然后再次点击时，相当于重新渲染了一个新的弹窗
<el-dialog v-if="dialogFormVisible" style="margin-left: 8rem" width="90%" title="修改数据" :visible.sync="dialogFormVisible" > 复制代码
直接销毁整个弹窗，实现功能
第二种方法
最最最简单的一种方法，当我想到第二种方法的时候，我直接再心里怀疑自己昨天是不是喝假酒了，才会因为这个功能从昨天折腾到现在。。。（关键是，我昨天没喝酒~~~~，直接放弃思考。。。）
实现如下
如果后端比较好一点，没有只返回第三级的id,而是同时把第三级的名字一起返回了，那么就可以通过下面的方法来实现
在级联选择器里面加上这句代码
placeholder="请选择" 复制代码
2.注册一个字符串
pleasett:"" 复制代码
3.赋值 如过后端返回的有第三级的选项名
直接进行赋值
this.pleasett = res.data.field.name; 复制代码
4.把placeholder="请选择"改成你所赋值的字段
<el-cascader v-model="titmre" :props="props" @change="handleSelect" :show-all-levels="false" :clearable="true" :placeholder="pleasett" ></el-cascader> 复制代码
5.给placeholder加个样式，把浅灰色改成浅黑色
.el-input__inner::placeholder{ color:rgba(0, 0, 0, 0.685) !important; } 复制代码结束
以上就是编辑时，级联选择器的回显实现~~~~，最后希望各位兄弟姐妹注意身体，加油！
作者：月__
链接：https://juejin.cn/post/7028842100363886600