前言:
antd的功能是挺好的,但是在他的下拉这里初始化赋值是很不友好的,我这里的需要时新增置空,修改赋值的需求,他的自带功能defaultValue满足不了需要,他只在创建的时候赋值一次,我们修改就需要每次点击都赋值上去,我们这里用value来实现,但是vue中的value使用跟react中还是有很大区别的,这里来记录下我解决这个问题的办法。
实现效果:
![](https://img-blog.csdnimg.cn/20191119110925399.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20191119111006749.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
实现步骤:
1、设置labelInValue为true ,为了下拉获取值可以拿到 key + label,
![](https://img-blog.csdnimg.cn/20191119111251111.png)
2、template部分绑定value值,data注册selVal ,watch里面写监听,监听传来的值
![](https://img-blog.csdnimg.cn/20191119111450172.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
![](https://img-blog.csdnimg.cn/20191119111608839.png)
![](https://img-blog.csdnimg.cn/20191119111659673.png)
![](https://img-blog.csdnimg.cn/20191119111718622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE5Nzk2,size_16,color_FFFFFF,t_70)
步骤二:前两步都是封装vue写的方法,这里之后是调用部分的写法
![](https://img-blog.csdnimg.cn/2019111911205292.png)
1、template部分:绑定的Value是传过去的值,是一个对象{ key+id ,label+内容(不是必填)}
<aSel :Value='project_obj' :options='peojectOptions' @selectChange='handleChangeGC'></aSel>
2、data:定义变量Value绑定的值
project_obj:{},//工程默认选中
3、js注册:
import aSel from '@/components/comantd/antd_select'
components: {
aSel
},
4、mothods:
/**
* 新增设备
*/
addTableData(){
this.project_obj = {key:' '};//工程默认选中,中间有个空格,必须加
},
editData(data){
//下拉数据回填
this.project_obj = {//工程默认选中
key:data.project_id,
};
}
/**
* 下拉回填
*/
handleChangeGC(data){//工程
this.addPostData.project_no = data.key;
},
到这里就结束了,如果还有问题,想和我讨论的小伙伴在底下留言,我见到会第一时间回复的,一起进步