vue antd v-for遍历动态数组 (arr[‘‘,‘‘] 和 arr[{},{},{}])

一、当动态数组存储的数据是 list['a','b','c']的时候

1.全局数组显示在页面上的方法：

 <a-form-item label="省份" :colon="false">  
 <a-select v-decorator="['orgName']" placeholder="请选择...">
        <a-select-option v-for="item in provinceListReal" :key="item" :value="item">              
         {{ item }}
       </a-select-option>  
        </a-select>
  </a-form-item>

2.前端定义全局数组，在接口返回里直接赋值

 api.getRealFilter({params: base64}).then(res => {
                    if (res.data.code === "200") {
                        let data = res.data.data
                        this.provinceListReal = data.provinceList
                    }
 })

二、当动态数组存储的数据是以下这种list[{}，{}，{}]格式时

PROVINCE_LIST = [
  {
    name: '北京',
    value: 'beijing',
  }, {
    name: '上海',
    value: 'shanghai',
  }, {
    name: '安徽',
    value: 'anhui',
  }]

1、页面显示代码：

<a-form-item label="稽核类型" :colon="false">
    <a-select v-decorator="['chkTypeName']" @change="chkTypeChange">
      <a-select-option v-for="(item, index) in chkTypeList" :key="index" :value="item.type">
         {{ item.name }}
       </a-select-option>
   </a-select>
</a-form-item>

2、接口赋值全局变量

getFilter(){
                api.getFilter().then(res => {
                    if (res.data.code === "200") {
                        let data = res.data.data
                        this.chkTypeList = data
                    }
                })
            },

有时候需要拆解后台返回回来的List[{},{}]
比如下面 我们定义的全局数组里面的map键值对可能和后台不一致，就需要我们遍历取出来，放到临时arr数组中，再赋值给全局数组，最后显示到页面上。

 api.getHorizon(param).then(res => {
           if (res.data.code === "200") {
              let result = []
              result.push(res.data.data)
              this.hbarChartData.rows = []
              const arr = []
              for (let i = 0; i < result[0].length; i++) {
                `arr.push({name: result[0][i].description, value: result[0][i].total})`
                        }
                   this.hbarChartData.rows = arr
           }
   })