element el-select组件双向绑定封装与使用

<template>
    <el-select :value="searchKey"
            filterable
            :filter-method="remoteMethod"
            :loading="loading" 
            no-data-text="暂无数据" 
            placeholder="请选择">
            <el-option
                @click.native="clickNative(item)"
                v-for="item in selectData"
                :key="item.id"
                :label="item.primaryCode"
                :value="item.provinceCode">
                <span style="float: left">{{ item.primaryCode }}span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.provinceCode }}span>
            el-option>
            <el-pagination
                :pager-count="5"
                @current-change="handleCurrentChange"
                :current-page.sync="pageNation.currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageNation.size"
                layout="prev, pager, next, jumper"
                :total="pageNation.total" />
    el-select>
template>

<script>
const debounce = (fn, wait = 300) => {
    let timeout;
    return function () {
        const context = this;
        const args = [...arguments];
        if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
            fn.apply(context, args);
        }, wait);
    };
}; 
export default {
    model: {
        prop: 'value',
        event: 'click'
    },
    props: {
        value: String
    },
    data() {
        return {
            selectData: [],
            pageNation: {
                currentPage: 1,
                size: 5,
                total: 0
            },
            loading: false,
            searchKey: this.value,
            isSelected: false
        };
    },
    methods: {
        clickNative(item, $event) {
            // 1.双向绑定, 第二个参数为查询关键字
            this.$emit('click', item.primaryCode);
            // 2.传递item中其他需要的字段  如果不需要传其他值则不需要emit
            this.$emit('on-item', item);
            this.searchKey = item.primaryCode;
        },
        handleCurrentChange(val) {
            this.pageNation.currentPage = val;
            this.getTableData(this.searchKey);
        },
        remoteMethod: debounce(function (query) {
            if (query) {
                // 重置验证状态
                this.$emit('click', '');
                this.$emit('on-item', {});
                // 实时查询
                this.searchKey = query;
                this.pageNation.currentPage = 1;
                this.getTableData(query);
            } else {
                this.searchKey = '';
                this.getTableData();
            };
        }, 500),
        getTableData(query = this.value) {
            this.loading = true;
            let params = {
                    data: {
                        primaryCode: query
                    },
                    pageIndex: this.pageNation.currentPage,
                    pageSize: this.pageNation.size
            };
            this.$api.trainProvinceInfo.query(params).then(res => {
                this.selectData = res.data;
                this.pageNation.total = res.total;
                this.loading = false;
            }, err => {
                this.loading = false;
                console.log('e', err);
            });
        }
    },
    mounted() {
        this.getTableData();
    }
};
script>

父组件在表单中使用：

<el-form-item label="一级部门" prop="primaryDept">
    <province-select v-model="formModel.primaryDept"  @on-item="getItem" />
el-form-item>

// js methods:
  getItem(item) {
      // 选择选项 带出省区名称及编码
      this.formModel.provinceCode = item.provinceCode;
      this.formModel.counterpartName = item.counterpartName;
  },

父组件在table中使用：

   <el-table :data="tableData" height="200" style="width: 100%">
       <el-table-column prop="courseName" label="课程名称" align="center">
           <template slot-scope="scope">
               <province-select v-model="scope.row.courseName"  @on-item="row => onItem(row, scope.$index)" />
           template>
       el-table-column>
   el-table>

// methods:
  onItem(row, idx) {
      this.$set(this.tableData[idx], 'courseId', row.id);
      this.$set(this.tableData[idx], 'courseCode', row.courseCode);
      this.$set(this.formModel, 'list', this.tableData); // 更新数组
  },