[element-ui]笔记：select 下拉框-下拉内容为表格

需求：在下拉框中输入内容进行模糊查询，输入三个字符以下拉框下方出现表格，选中表格的行取值后进行页面下一步的搜索

查看element发现了远程搜索与自定义模板（若想点击下拉框出现下方表格内容，可使用“可搜索”，我这个数据量太大了，就使用的“远程搜索”）

实现效果如下：

代码如下：

                 <div>
                    名称：
                    <div>
                        <template>
                            <el-select v-model="code" filterable remote
                                placeholder="支持编码、名称" default-first-option
                                :remote-method="remoteMethod" :loading="loading" :no-data-text="noDataText"
                                @change="getTable">
                                <div style="width: 500px;height: 30px;">
                                    <span style="width:10%;">编码</span>
                                    <span style="width:10%;">名称</span>
                                </div>

                                <el-option v-for="(item,index) in filterData" :key="item.index" :label="item.name"
                                    :value="item.code">
                                    <div style="width: 500px;height: 30px;">
                                        <span style="width:10%;">{{ item.code }}</span>
                                        <span style="width:10%;">{{ item.name }}</span>
                                    </div>
                                </el-option>
                            </el-select>
                        </template>
                    </div>
                </div>

      new Vue({
        el:'.content',
        data:{
            code:'',
            // 原始数据
            data: [],
            // 搜索后的数据
            filterData:[],
            // 选中的值
            sel:'',
            // 输入的值转为大写后
            queryVal:'',
            noDataText: '无数据',
            loading: false,
        },
        methods:{
            remoteMethod(queryVal) {
                var upQueryVal = queryVal.toUpperCase();
                this.queryVal = upQueryVal;
                if (this.data) {
                    if (upQueryVal !== '' && upQueryVal.length > 3) {
                        setTimeout(() => {
                            var matches = [];
                            this.data.forEach(el => {
                                var search = (el.code + '#' + el.name);
                                if (search.indexOf(upQueryVal) > -1) {
                                    matches.push(el);
                                }
                            });
                            this.filterData= matches
                            console.log(this.filterData);
                        }, 200);
                    } else {
                        this.filterData= [];
                    }
                }
            },

            getTable(val) {
                this.sel = val;
            },
           }
        })