Antd Vue：select组件增加检索功能

2022-11-22 周二

文档

API

            <a-form-item label="xxx">
              <a-select
                allowClear
                placeholder="请选择xxx"
                style="width:150px"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                v-decorator="['abc', { initialValue: data && data.abc, rules: [{ required: true, message: '请选择xxx' }], validateTrigger: ['change','blur'] }]"
              >
                <a-select-option
                  :value="item.id"
                  v-for="item in list"
                  :key="item.id"
                >{{ item.name }}
                </a-select-option
                >
              </a-select>
            </a-form-item>

methods:{
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
}