]
页面代码
<el-form-item label="考评供应商：" prop="supplierCompanyName">
<el-select
class="input-width"
v-model="formData.supplierCompanyName"
filterable
remote
reserve-keyword
@change="handleSelectSupplier"
:remote-method="querySupplierList"
:loading="supplierLoading"
clearable
v-el-select-loadmore="loadmore" // 主要实现下拉加载代码
placeholder="请输入供应商名称"
>
<el-option v-for="item in supplierSelectList" :key="item.id" :label="item.name" :value="JSON.stringify(item)">
<span v-html="item.label"></span>
</el-option>
</el-select>
</el-form-item>
逻辑代码
<script>
export default {
components: {
eTableList
},
directives: {
//注意：这个是写到data外面
"el-select-loadmore": {
bind(el, binding) {
const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
SELECTWRAP_DOM.addEventListener("scroll", function () {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
});
}
}
},
data() {
return {
formData: {
// ...一些数据
},
supplierLoading: true,
supplierSelectList: [], pageData: {
pageNum: 1,
pageSize: 30
},
}
},
created() {
this.getSupplierList();
},
methods: {
// 懒加载
loadmore() {
if (this.pageData.pageNum < this.pages) {
this.pageData.pageNum++;
this.getSupplierList();
}
},
async getSupplierList() {
let query = {
companyName: "",
pageSize: this.pageData.pageSize,
pageNum: this.pageData.pageNum
};
let res = await api.querySupplierList(query);
if (res.code === "200") {
this.pages = res.data.pages;
let keyMap = {
companyName: "name",
companyId: "id"
};
let arr = this.changSelectKey(keyMap, res.data.records);
arr.forEach(item => (item.label = item.name));
this.supplierSelectList = [...this.supplierSelectList, ...arr];
}
},
handleSelectSupplier(row) {
if (row) {
let { id, name } = JSON.parse(row);
this.formData.supplierCompanyId = id;
this.formData.supplierCompanyName = name;
}
},
// 修改下拉框数组对象key
changSelectKey(keyMap, query) {
let newArr = query;
newArr.map((item, index) => {
let obj = newArr[index];
for (let key in obj) {
let newkey = keyMap[key];
if (newkey) {
obj[newkey] = obj[key];
delete obj[key];
}
}
});
return newArr;
},
// 公司表单查询
async querySupplierList(query) {
if (query !== "") {
this.supplierLoading = true;
let params = {
pageSize: 30,
companyName: query
};
api.querySupplierList(params).then(res => {
this.supplierLoading = false;
let keyMap = {
companyName: "name",
companyId: "id"
};
let arr = this.changSelectKey(keyMap, res.data.records);
this.supplierSelectList = this.setHightLight(arr, query);
});
} else {
this.supplierSelectList = [];
}
},
// 设置高亮
setHightLight(arr, keyword) {
if (arr && arr.length > 0 && keyword) {
arr = arr.filter(item => {
let reg = new RegExp(keyword, "g");
item.label = item.name;
let replaceString = `<span style="color: #409EFF;">${keyword.trim()}</span>`;
if (item.label.match(reg)) {
//为了不影响原始name，我们这里给item重新设置一个parseName，模板中显示的是parseName
item.label = item.label.replace(reg, replaceString);
return item;
}
});
return arr;
}
},
}
}
</script>
