首页 > 前端 > vue.ant.design学习笔记
2021
09-07

vue.ant.design学习笔记

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();

本文》有 0 条评论

留下一个回复