antdesign——select搜索

antdesign——select搜索_第1张图片

具有搜索功能的下拉框

 			  <a-form-item label="企业名称">
                <a-select
                  showSearch
                  optionFilterProp="children"
                  :filterOption="filterOption"
                  v-model="queryParam.enterpriseName"
                  :allowClear="true"
                  style="width:100%"
                >
                  <a-select-option v-for="type in enterpriseArr" :value="type.enterpriseName" :key="type.enterpriseId"
                    >{{ type.enterpriseName }}
                  </a-select-option>
                </a-select>
              </a-form-item>

// 企业搜索功能
    filterOption(input, option) {
      if (option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    },

// 下拉内容过长隐藏
/deep/.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrapper {
  overflow: hidden !important;
}

你可能感兴趣的:(antdesign,vue,vue.js,javascript,前端)