Ant design Vue中的a-select赋值取值
前言
记录一下，就是一个下拉框，里面的待选数据由数据库里来，并且选完保存后还能回显，主要记录的是回显操作，与我之前写的文章大同小异。
一、.vue
1.template
//注意下面的v-model，不是直接一个数组{{ item.title }}2.data
data () {
return {
list: [],
Form: {
dataAuth: []
}
}
}3.created
created () {
this.show()
}4.下拉框选项
methods: {
show(){
//xxxxxxxxx是后端工程师给你的接口，也可以在JS里写，之后引进来使用
query(xxxxxxxxx).then(res => {
const result = res.result.data
result.forEach((res) => {
this.list.push({ 'key':res.key, 'title':res.title })
})
})
},
}
文章图片
5.※回显※
methods: {
show1() {
query(xxxxxxxxx).then(res => {
this.$set(this.Form, 'dataAuth', res.result.data)
})
}
}
文章图片
这是后端工程师给你的，他将以这种样子返回给你数据
文章图片
总结 像这样直接赋值，有时候不显示，最好还是
.$set()，不知原因this.addForm.dataAuth = ress.result.data像这样两层的，给
dataAuth;
[]初值也不好使，如果把dataAuth;
[]单拿出来，赋初值就好使，不知原因Form: {
dataAuth: []
}【Ant design Vue中的a-select赋值取值】好了姐妹们，bye~~~
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- [译文]Domain|[译文]Domain Driven Design Reference（四）—— 柔性设计