Ant Design of vue

Vue的标签属性label中字符串拼接变量

  

1
2
3

a-select组件 v-for 报错—是否带：

加冒号,说明属性后是一个变量或表达式 是v-bind的缩写,绑定一个变量( 组件自定义属性 ); 没加冒号,后面就是对应的字符串字面量 (组件自带的属性);
在工作中使用a-select组件，对其用v-for事件，官网基本用法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果图：
需求：变量存储所有的option，用v-for训话渲染
value用官网的用法不带: ,导致报错Duplicate keys detected: ‘item.key’. This may cause an update error ，纠正：加上冒号，使其引用v-for中定义的元素

//法1  元素是对象的数组[{}]
const selelct_visits = [{ key: 'visits_asc', value: '访问次数升序' },
  { key: 'visits_desc', value: '访问次数降序' }]
  
<a-select default-value="visits_asc" style="width: 300px" @change="handleChange">
            <a-select-option v-for="(item, index) in selelct_visits"
              :key="index"
              :value="item.key">{{item.value}}
            </a-select-option>
</a-select>

//法2  对象{}
const selelct_UpdateTime = {
  dafaultValue: '更新时间升序', //  updatetime_asc
  updatetime_desc: '更新时间降序'
}

<a-select default-value="dafaultValue" style="width: 300px" @change="handleChange">
            <a-select-option v-for="(value,key) in selelct_UpdateTime"
              :key="key"
              :value="key">{{value}}
            </a-select-option>
          </a-select>

//法3 元素是字符串的数组['english','math','chinese']
<a-select
     style="width: 100%"
     placeholder="请选择开班课程"
     v-decorator="['courseType', validatorRules.courseType]">
     <a-select-option value="">请选择开班课程</a-select-option>
     <a-select-option v-for="(course, index) in courseList" :key="index.toString()" :value="courseTypeList[index]" >
          {{ course }}
     </a-select-option>
</a-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34