前言
我們都知道elementui的選擇器組件（下拉菜單)局限性很多，比如說選項(xiàng)不能展示更多行內(nèi)容，數(shù)據(jù)量太大的話卡頓（因?yàn)闆]有分頁）等等幅疼。博主這里分享一個(gè)自己封裝的組件米奸，解決了這些所有問題，可展示多行內(nèi)容爽篷，單選或多選悴晰，分頁，禁用逐工，輸入搜索膨疏，在使用時(shí)更加的靈活。
組件使用的截圖
代碼部分
<template>
? <!-- 會員自定義選擇(多選/單選/分頁) -->
? <el-select
? ? ref="select0"
? ? value-key="memberId"
? ? :style="{ width: inputwidth }"
? ? v-model="keyword"
? ? filterable
? ? :multiple="multiple"
? ? clearable
? ? remote
? ? :disabled="nochange"
? ? :remote-method="phoneinput"
? ? @change="projectnameClick"
? ? @click.native="myOnClick"
? ? placeholder="請選擇或輸入姓名/手機(jī)號搜索"
? >
? ? <el-option
? ? ? class="member-item"
? ? ? v-for="(item,index) in list"
? ? ? :key="item.memberId+new Date()+index"
? ? ? :label="item.memberName+' '+item.mobile+' '+item.companyName+'/'+item.deptName"
? ? ? :value="item"
? ? >
? ? ? <div class="member-item">
? ? ? ? <div>
? ? ? ? ? <div>{{ item.memberName }}</div>
? ? ? ? ? <div>{{ item.mobile }}</div>
? ? ? ? ? <div v-if="item.technicianNames">專屬老師：{{ item.technicianNames }}</div>
? ? ? ? ? <div v-else style="color:#909399">暫無專屬老師</div>
? ? ? ? </div>
? ? ? ? <div>{{ item.companyName + '/' + item.deptName }}</div>
? ? ? </div>
? ? </el-option>
? ? <pagination
? ? ? v-show="total>0"
? ? ? :total="total"
? ? ? :page.sync="queryParams.pageNum"
? ? ? :limit.sync="queryParams.pageSize"
? ? ? layout="total, prev, next, jumper"
? ? ? @pagination="getpageList"
? ? />
? </el-select>
</template>
<script>
import {memberList} from "@/api/comm";
export default {
? name: "SelectMemberInput",
? components: {},
? props: {
? ? value: {
? ? ? type: [Array, String, Number],
? ? },
? ? //禁用狀態(tài)
? ? nochange:{
? ? ? type: Boolean,
? ? ? default: false,
? ? ? required: false
? ? },
? ? //input寬度 不是必傳項(xiàng)
? ? inputwidth: {
? ? ? type: String,
? ? ? default: "210px",
? ? ? required: false,
? ? },
? ? //是否多選 默認(rèn)不多選 不是必傳項(xiàng)
? ? multiple: {
? ? ? type: Boolean,
? ? ? default: false,
? ? ? required: false,
? ? },
? },
? model: {
? ? prop: "value",
? ? event: "input",
? },
? data() {
? ? return {
? ? ? keyword: "",
? ? ? queryParams: {
? ? ? ? keyword: "",
? ? ? ? memberIds: "",
? ? ? ? pageNum: 1,
? ? ? ? pageSize: 10
? ? ? },
? ? ? list: [],
? ? ? total:0
? ? };
? },
? created() {
? },
? mounted() {
? },
? watch: {
? ? value: {
? ? ? handler(newVal, oldVal) {
? ? ? ? this.queryParams.pageNum = 1;
? ? ? ? this.getList('', newVal ? newVal.toString() : '');
? ? ? ? this.keyword = {
? ? ? ? ? memberId:newVal
? ? ? ? };
? ? ? },
? ? ? deep: true,
? ? ? immediate: true,
? ? },
? },
? methods: {
? ? getpageList(){
? ? ? memberList(this.queryParams).then((response) => {
? ? ? ? this.list = response.rows;
? ? ? ? this.total = response.total;
? ? ? });
? ? },
? ? getList(keyword, memberIds) {
? ? ? this.queryParams.keyword = keyword;
? ? ? this.queryParams.memberIds = memberIds;
? ? ? memberList(this.queryParams).then((response) => {
? ? ? ? this.list = response.rows;
? ? ? ? this.total = response.total;
? ? ? });
? ? },
? ? //選擇
? ? phoneinput: function (keyword) {
? ? ? this.keyword = keyword;
? ? ? this.getList(keyword, '');
? ? },
? ? myOnClick:function (){
? ? ? this.getList();
? ? },
? ? projectnameClick: function (item) {
? ? ? this.$emit("input", item.memberId);
? ? ? this.$emit("selinfo", item);//傳item對象 父組件可接受取用label
? ? }
? }
};
</script>
<style lang="scss" scoped>
.select-box {
? display: flex;
? align-items: center;
}
.member-item {
? display: flex;
? min-width: 400px;
? height: 76px;
? border-bottom: 1px solid #dcdbb6;
? justify-content: space-between;
? align-items: center;
? line-height: 20px;
}
.user-item {
? display: flex;
? min-width: 400px;
? height: 60px;
? border-bottom: 1px solid #dcdbb6;
? justify-content: space-between;
? align-items: center;
? line-height: 26px;
}
.el-select-dropdown__item {
? padding: 0 22px 0 18px !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
? content: "" !important;
}
::v-deep .el-input-group__prepend div.el-select .el-input__inner {
? background-color: #fff;
}
::v-deep .el-input.is-disabled .el-input__inner {
? color: #606266!important;
}
</style>
組件的查詢數(shù)據(jù)替換成自己的查詢哦~
這里分頁也是引用的組件钻弄，可以自己寫≌哂酰或者先關(guān)注博主窘俺，以后會分享出來
使用
引入組件試試吧~
