后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)

一.antd vue中的a-select的动态加载列表a-select-option

1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组，并循环
后台数组格式：

数组(例):arr=[
{id:1,name:'数组1',num:2,provice:'qqqqq'},
{id:2,name:'数组2',num:3,provice:'qqqqq'},
{id:3,name:'数组3',num:4,provice:'qqqqq'},
]

获取数组的处理方法：
重点：当获取后台的数据后，想从中取得几项数据，且组成一个数组，长度一样
arr=[
{id:1,name:‘数组1’},
{id:2,name:‘数组2’},
{id:3,name:‘数组3’},
]
1.对数组进行循环，可以拿到数组中的每一条数据

for(var i=0;i<arr.length;i++){。。。}

2.在可以拿到每一条数据的时候，取出其中的每一条数据的几项，并赋值给某一个对象的属性，每一个循环，都会有一个空对象，空对象中存在想获取的几项数据，且在每次循环后，push到一个新的数组中。这样当循环完成后，就会拿到一个对象数组
this.cityList=[obj1,obj2,obj3…]

  this.cityList=[];  //定义的新数组for(var i=0;i<arr.length;i++){var obj={};obj.id=arr[i].id;obj.name=arr[i].name;//obj={id:'',name:''}this.cityList.push(obj);}

3.处理方法函数

getCityData(){postAction('xx/xx/xx').then((res)=>{if(res.success){console.log(res)var obj={};var arr=res.result;this.cityList=[];for(var i=0;i<arr.length;i++){var obj={};obj.id=arr[i].id;obj.name=arr[i].name;this.cityList.push(obj);}console.log(this.cityList)}else{this.$message.info(res.message);}})},

4.对a-select列表进行循环加载

<a-select:allowClear="true"style="width: 100%"placeholder="请选择所在地"v-decorator="['address',validatorRules.address]"><a-select-option v-for="(role,roleindex) in cityList" :key="role.id" :value="role.name">    //cityList是获取的新数组{{ role.name }}</a-select-option>
</a-select>

二.a-select的选择项a-selct-option的回显(后台返回value，选择项就选中某一项value)

1.场景：后台管理系统
点击新增，添加form表单数据，点击编辑，form表单回显数据
表单项代码：

<a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="985"><a-select :allowClear="true" placeholder="请选择是否985" v-decorator="[ 'isOne', validatorRules.isOne]"><a-select-option value="">请选择</a-select-option><a-select-option value="1">是</a-select-option><a-select-option value="0">否</a-select-option></a-select>
</a-form-item>

当获取到后台数据后，进行回显，一般来讲，后台将会返回：

isOne:“1”—或者—isOne:“0”
isOne:1—或者—isOne:0
第一种返回的是一个字符串string，第二个返回的是一个数字number
当返回的数据和a-select-option中的value值不一样时，将不会显示。
value="…"------其中的value值是字符串string
返回的isOne:1------其中的对应的value值是一个数字number
解决方法
直接将返回的数据变成字符串即可，每当点击某一行数据进行编辑时，都会进行数据的回显

edit (record) {this.form.resetFields();this.model = Object.assign({}, record);  //table数据，antd vue中的table组件自带的参数，即table每一行的对象recordthis.visible = true;this.$nextTick(() => {this.form.setFieldsValue(pick(this.model,'isOne'))}）if(record.id){  //当存在id时，证明就是在编辑列表数据，没有id时，就证明在新增数据this.model.isOne= this.model.isOne.toString();//直接变成字符串，使之符合value的值的类型}
}

后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)相关推荐

Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue+antdesign导航菜单动态加载
2019独角兽企业重金招聘Python工程师标准>>> antdesign侧边栏菜单,需根据后台返回的数据动态加载菜单列表,在循环填充时会遇到子菜单项<a-sub-menu&g ...
jap页面使用ajax动态加载列表数据,JSF - 使用AJAX调用基于DataTable中的mimetype值加载不同形式...
对于我的一个项目,我需要根据DataTable组件中可用的mimetype值加载不同的表单.我有标题,内容 - 中间的DataTable和页脚中的数据显示.单击DataTable条目应根据mimety ...
VUE之组件的动态注册和动态加载
目录问题描述项目中的应用使用总结问题描述实际项目中,针对不同的数据开发了不同的数据展示视图组件,例如:拓扑图.热力图.地图.每一类视图都有一个独立的.vue组件,在界面化管理平台上,要实现可 ...
html select ajax,AJAX 动态加载后台数据绑定select的方法
直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...

后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)

一.antd vue中的a-select的动态加载列表a-select-option

二.a-select的选择项a-selct-option的回显(后台返回value，选择项就选中某一项value)

后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)相关推荐

最新文章

热门文章