标签：v-model hand hat wrapper ace ora app row efault
我的需求： select下拉联动，选择模板配置后，字段配置重新获取，此时要清空之前已选的字段
代码:
<template>
<div>
<a-form class="dataForm" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }"
@submit="handleCancel">
<a-form-item label="模板配置" v-model="osType">
<a-row :gutter="16">
<a-col class="gutter-row" :span="22">
<a-select
placeholder="请选择"
style="width: 100%"
v-decorator="[‘osType‘,rules.osType]"
@change="changeOsType"
>
<a-select-option v-for="(item,index ) in modeListArr" :key="index" :value="item.key">
{{ item.value }}
</a-select-option>
</a-select>
</a-col>
<a-col class="gutter-row" :span="2">
<a-icon type="question-circle" />
</a-col>
</a-row>
</a-form-item>
<a-form-item label="字段配置" v-model="fieldList">
<a-select
mode="tags"
placeholder="请选择"
style="width: 100%"
v-decorator="[‘fieldList‘, rules.fieldList]"
>
<a-select-option v-for="(item,index ) in fieldListArr" :key="index" :value="item.key">
{{ item.value }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
data() {
return {
osType:‘‘,
modeListArr:[],
fieldList: ‘‘,
fieldListArr: [],// 配置列表,
form: this.$form.createForm(this),
rules: {
osType: {
rules: [
{
required: true,
message: "请选择",
}],
initialValue: [],
},
fieldList: {
rules: [
{
required: true,
message: "请选择",
}],
initialValue: [],
},
}
}
},
mounted(){
let that = this;
// ···请求接口并处理 ···
that.rules[‘fieldList‘].initialValue = [‘111‘]; //初始化示例
// ···
},
methods: {
changeOsType(e) {
let that = this;
that.osType = e;
that.form.setFieldsValue({ //《=关键 清空tag选项
‘fieldList‘: []
})
that.fieldList = [];
that.fieldListArr = [];
},
handleCancel（）{
···
}
}
}
</script>
ant-design-vue——select下拉框tags清空已选数据
标签：v-model hand hat wrapper ace ora app row efault
原文地址：https://www.cnblogs.com/linjiangxian/p/13299985.html
