vue ant autocomplete控件再封裝

控件代碼：

<template>
  <a-auto-complete v-if="type=='autocomplete'"
                   :data-source="dataSource"
                   :placeholder="placeholder"
                   :filter-option="filterOption"
                   @change="change"
                   @select="select"
                   allowClear
                   v-model="selId"
                   ref="auto"
                   option-label-prop="title"
  >
    <template slot="dataSource">
      <a-select-option v-for="opt in dataSource" :key="opt.id" :title="opt.residentName + opt.phone">
        <a-row>
          <a-col :span="6">{{opt.residentName}}</a-col>
          <a-col :span="6">{{opt.phone}}</a-col>
          <a-col :span="6">{{opt.idCard}}</a-col>
          <a-col :span="6">{{opt.communityName}}{{opt.buildingNo}}</a-col>
        </a-row>

      </a-select-option>
    </template>
  </a-auto-complete>
  <a-input v-else-if="type=='input'" :placeholder="placeholder" @change="changeInput" v-model="selId" allowClear></a-input>
</template>

<script>
  import {getAction} from '@/api/manage'

  //支持autocomplete和input兩種格式
  //type : autocomplete , input
  export default {
    name: "AutoResident",
    model: {
      prop: 'resident',
      event: 'selResident'
    },
    props: {
      placeholder: {type: String, default: '請用姓名、拼音首字母、身份證號、電話號碼快速查找'},
      resident: {
        type: Object, default: () => {
        }
      },
      type: {type: String, default: 'autocomplete'}
    },
    data() {
      return {
        dataSource: [],
        selId: this.resident ? this.resident.id : '',
      }
    },
    created() {
      if (this.resident) {
        this.dataSource.push(this.resident);
      }
    },
    watch: {
      resident(newVal) {
        this.selId = newVal.id;
        if (this.dataSource.length == 0) {
          if (JSON.stringify(this.resident) != "{}") {
            this.dataSource.push(this.resident);
          }
        }
      }
    },
    methods: {
      filterOption(input, option) {
        let row = this.dataSource[this.dataSource.findIndex(f => f.id == option.key)];
        return row.residentName.indexOf(input) >= 0
          || row.py.toUpperCase().indexOf(input.toUpperCase()) >= 0
          || row.phone.indexOf(input) >= 0
          || row.idCard.toUpperCase().indexOf(input.toUpperCase()) >= 0

        // return this.pinyin.getCamelChars(option.componentOptions.children[0].text).toUpperCase().indexOf(input.toUpperCase()) >= 0;
      },
      change(value) {
        if (value) {
          this.list();
        } else {
          //輸入框清空了，設置選擇對象爲空，清除數據源
          this.$emit('selResident', {});
          this.dataSource = [];
          this.$emit('onDataChange', this.dataSource);
        }
      },
      select(value) {
        let selObj = {};
        if (this.dataSource.length > 0) {
          for (let i = 0; i < this.dataSource.length; i++) {
            if (this.dataSource[i].id == value) {
              selObj = this.dataSource[i];
              break;
            }
          }
        }
        if (JSON.stringify(selObj) != "{}") {
          this.$emit('selResident', selObj);
          this.$emit('onSelect', selObj);
          this.dataSource=[];
          this.dataSource.push(selObj);
          this.$emit('onDataChange',this.dataSource);//選擇後的數據源只留下選擇的這個數據
        }
      },
      changeInput() {
        this.list();
      },
      list() {
        if (!this.selId) {
          this.dataSource = [];
          this.$emit('onDataChange', this.dataSource);
          return;
        }
        if (this.dataSource.findIndex(f => f.id == this.selId) >= 0) return;//此時已是選擇後，不用再查找了

        let params = {residentName: this.selId, pageSize: 30};
        getAction('/hoscard/resident/list', params).then(res => {
          if (res.success) {
            this.dataSource = [];
            for (let i = 0; i < res.result.records.length; i++) {
              let item = res.result.records[i];
              //賦值這幾個可以不需要
              item.value = item.id;
              item.text = item.residentName;
              item.label = item.residentName;
              this.dataSource.push(item);
            }
            this.$emit('onDataChange', this.dataSource);
          }
        })
      }
    }

  }
</script>

<style scoped>

</style>

重點是filterOption方法中的過濾，用option中key，在數據源中查找，符合條件的就返回true,change事件中用輸入值向後臺請求查詢，結果返回後拋出 onDataChange事件，調用方可以在這個事件中使用數據源做其他事情。
option-label-prop=“title” 指定填充到select中的屬性值，在選擇後用於回填，下拉項是自定義的格式，顯示多列數據。值 “title” 是指option的屬性， ，如果不設置，默認是value

使用代碼：

<auto-resident v-model="queryParam.resident"  @onDataChange="residentDataChang"></auto-resident>

queryParam.resident 是一個對象。