1.form表单相同名字多值写法，类似普通表单的相同名字后端可以直接接收到数组
<span v-for="(item, index) in data.list" :key="index">
<a-form-item :label="item.name" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-switch
v-decorator="[
'status['+index+']',
{
initialValue: item.status,
validateTrigger: 'change'
}
]"
@change="handleChangeStatus($event,index)"
checkedChildren="上线"
unCheckedChildren="下线"
:defaultChecked="item.status"
/>
</a-form-item>
</span>2.动态tabs标签页，默认选中第一个
默认从1开始，key需要+1，循环必须写在 a-tab-pane 中，写到外层取不到值
<a-tabs defaultActiveKey="1"> <a-tab-pane v-for="(item, index) in data.list" :tab="item.name" :key="index+1"> </a-tab-pane> </a-tabs>
3.对象属性为变量, ES6支持
ES6把属性名用[]括起来，则括号中就可以引用提前定义的变量
var attname = 'name';
var p = {
[attname] :'张三', //引用了变量attname，相当于添加了一个属性名为name的属性
age:20
}ES6——模板字符串：`string` ，ES2015新增的符号
data 中有个属性
property1:1
var x = "property1";
this.data[`${x}`] = 2;
console.log(this.data.property1);4.a-switch切换时，新增参数(比如index)传递
官方文档回调函数只支持一个参数：Function(checked:Boolean)
<span v-for="(item, index) in data.list" :key="item.cid">
<a-form-item :label="item.name" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-switch
v-decorator="[
'status['+item.cid+']',
{
initialValue: item.status,
validateTrigger: 'change'
}
]"
@change="handleChangeStatus($event,index)"
checkedChildren="上线"
unCheckedChildren="下线"
:defaultChecked="item.status"
/>
</a-form-item>
</span>5.a-select选择框已经有保存的值，编辑时如何显示原来保存的文本
初始化value的时候需要用模板表达式，否则显示key，不显示文本
<a-form-item label="场景选择" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-select
style="width: 100%"
placeholder="选择场景"
@change="changeSpec($event,index,specIndex)"
v-decorator="[
'spec_id['+item.cid+']['+specIndex+']',
{
initialValue: `${spec.spec_id}`,
}
]"
>
<a-select-option
v-for="specinfo in data.specs[item.cid]"
:key="specinfo.id"
>{{ specinfo.name }}</a-select-option>
</a-select>
</a-form-item>6.vue强制刷新页面
this.$forceUpdate();
- 本文固定链接: https://www.phpmianshi.com/?id=3304
- 转载请注明: admin 于 PHP面试网 发表
《本文》有 0 条评论