antd vue下拉搜索配置

380 阅读1分钟
<!--index.vue  查询表单组件-->
<!--查询调价下拉,可搜索-->
<a-select
        :show-search="item.showSearch"      <!--可查询设置为true-->
        :filter-option="filterOption"       <!--查询筛选方法,必须得有-->
        v-if="item.type == 'select' && (item.isShow != false)"
        v-model:value="midformState[item.prop]"
        :placeholder="item.placeholder"
        :mode="item.mode"           <!--可多选-->
        @change="item.change"
        @panelChange="item.panelChange"
        :allowClear="item.allowClear || true"
        :disabled="item.disabled !== undefined ? item.disabled : formDisabled"
>
    <template #suffixIcon>
        <component :is="CaretDownOutlined"/>
    </template>
    <a-select-option v-for="(cg,index) in item.options" :key="index"
                     :value="cg[item.optionsName && item.optionsName.value ? item.optionsName.value : 'value']">
        {{ cg[item.optionsName && item.optionsName.label ? item.optionsName.label : 'label'] }}
    </a-select-option>

</a-select>
<script lang="ts" setup>
    // 查询条件搜索
    let filterOption = (value, option) => {
        //  跟下拉数据有关,option.children[0].children不固定,找下拉选项的name即可
        return option.children[0].children.indexOf(value) > -1
    }
</script>
<!--condition-query.ts  查询表单配置-->
<script lang="ts" setup>
    let antdforms = ref([
        {
            type: 'select',
            label: '',
            prop: "eventType",
            optionsName: {label: 'catalogName', value: 'catalogNo'}, 
            placeholder: "预警类型",
            showSearch:true,                        //  展示搜索,或者mode设置也会展示搜索
            options: eventChildrenArr.value,        //  下拉数据
            change: (val, option) => {
                infoFindData.value.eventType = val
            },
            rules: [{required: true, message: "事项类型", trigger: "change"}]
        },
    ])
</script>