【笔记~】使用js实现搜索排序(el-table)

直接看代码 ↓

 <div id="messages">
        <div class="serchBox">
          <label id="lbltxtSearchService">搜索
            <input type="text" class="el-input__inner" id="txtSearchService" placeholder="支持编码、名称" v-model="serchContent" @keyup.enter="serchEvent()" />
          </label>
        </div>

        <div class="selContentBox">
          <template>
            <el-table :header-cell-style="{background:'#f5f7fa'}" ref="multipleTable" @fit="true" border
              highlight-current-row :data="model" @selection-change="handleSelectionChange">
              <el-table-column prop="name" label="名称" sortable width="200px"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="code" label="编码" sortable width="265px"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="type" label="类型" sortable width="150px"
                :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>

 var vue = new Vue({
			el: "#messages",
			data: {
				model,
				serchContent: ''
			},
			methods: {
				// 搜索
				serchEvent() {
					if (event.keyCode == 13) {
						var input = this.serchContent.trim().toLowerCase();
						if (model) {
							var ServiceList = model;
							// console.log(model);
							// 给ServiceList添加_index_
							ServiceList.forEach((service, index) => {
								service._index_ = index;
							});
                            // 判断搜索框中有无内容
							if (input) {
								var matches = [];
								var unmatches = [];
                                // 取出要要根据搜索的内容
								ServiceList.forEach(service => {
									var search = (service.interface_service_code + "#" + service.interface_service_func_name + "#" + service.interface_service_name).toLowerCase();
									// console.log(search);
                                    // 判断搜索框中的内容与支持搜索的内容
									if (search.indexOf(input) > -1)
										matches.push(service);
									else
										unmatches.push(service);
								});
                                // 合并数组,符合的内容就在新数组的前面啦
								var datas = matches.concat(unmatches);
								// console.log(datas);
								this.model = datas
							}
							else {
								ServiceList = ServiceList.sort((l, r) => {
									if (r._index_ < l._index_)
										return 1
									else
										return -1;
								});
								this.model = ServiceList
							}
						}
					}
				},
			}
		});