zoukankan      html  css  js  c++  java
  • ant-design-vue——select下拉框tags清空已选数据

    我的需求: 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=" 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=" 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>
  • 相关阅读:
    IDEA编译Flume Sink通不过解决方法
    Hive基础之Hive体系架构&运行模式&Hive与关系型数据的区别
    Hive基础之Hive环境搭建
    Hive基础之Hive是什么以及使用场景
    pig和mysql脚本对比
    pig入门案例
    pig概述
    sqoop操作之ETL小案例
    java里面的package/import 和PHP里面的namespace/use 是一模一样的吗
    jQuery对象和DOM对象使用说明,需要的朋友可以参考下。
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/13299985.html
Copyright © 2011-2022 走看看