Cascader 级联选择器回显(两种方法)

前言

昨天后端告诉我说需要加一个编辑功能，接口已经写好了，然后让我添加一个编辑弹窗，我想这不是很简单的东西，然后很快就写好了弹窗，顺便把编辑的数据也展示了一下，然后在展示级联选择器的数据的时候，遇到了各种让我头大的问题

回显实现

第一种方法

按照jym们的回复，我试了一下，在联选择器的props中加入emitPath: false，即可通过最后一级的value值进行回显

 <div>

        <el-cascader
         :props="props"
          clearable 
          v-model="titmre"
          :show-all-levels="false"
          :options="options"
         @change="handleChange">
        </el-cascader>
        <span>选中的数据{{ titmre }}</span>
    </div>
    
     // titmre: ["cexiangdaohang"], //多选
        titmre: "kekong", //单选
     props: {
            multiple: true, //是否多选
            emitPath: false, //通过最后一级的id回显
            },

注意：在单选的情况下，绑定的字段为字符串格式，多选的情况下为数组格式，在这里非常感谢jy 沙雕网友2333给的建议！！

第二种方法

最最最简单的一种方法，当我想到第二种方法的时候，我直接再心里怀疑自己昨天是不是睡过头了，才会因为这个功能从昨天折腾到现在。。。（关键是，我今天起的很早~~~~，直接放弃思考。。。）

实现如下

如果后端没有只返回第三级的id,而是同时把第三级的名字一起返回了，那么就可以通过下面的方法来实现

1. 在级联选择器里面加上这句代码

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;
}

结束

以上就是编辑时，级联选择器的回显实现~~~~，最后希望各位兄弟姐妹注意身体，加油！