下拉框分頁(yè).png
和公司簽了保密協(xié)議啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈所以我把數(shù)據(jù)全部馬賽克了哈哈哈哈哈哈哈哈哈哈哈尼萌就當(dāng)有就成~~
輸入框前面有個(gè)label匀泊，和頁(yè)面中的其他label保持一致否灾；分頁(yè)的組件是vue-element-admin中自帶的pagination沛贪，用elementui的el-pagination也可~~一樣的道理反正就是各種傳值
組件內(nèi)容 ↓
<template>
<div class="container-select">
<!-- 這部分是label -->
<span class="title-label" :style="{ width: labelWidth }">{{ label }}</span>
<!-- 這部分是點(diǎn)擊輸入框跳出來(lái)的分頁(yè)小彈窗 -->
<el-popover placement="bottom" trigger="click" v-model="visible">
<el-table
size="mini"
:data="list"
highlight-current-row
@row-click="changeTableRow"
v-loading="listLoading"
>
<el-table-column
:prop="nameProp"
:label="nameLabel"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
v-if="other"
:prop="otherProp"
:label="otherLabel"
align="center"
></el-table-column>
</el-table>
<small-pagination
:total="total"
:page.sync="params.pageNum"
:limit.sync="params.pageSize"
@pagination="getList"
/>
<el-input
v-model="inputValue"
:placeholder="placeholder"
clearable
slot="reference"
@input="onChange"
></el-input>
</el-popover>
</div>
</template>
<script>
// 這是分頁(yè)組件逞盆。。用el-pagination也可以
import smallPagination from "@/components/Pagination/withoutNumber.vue";
export default {
components: {
smallPagination,
},
props: {
labelWidth: {
type: String,
default: "70px",
},
label: {
type: String,
default: "機(jī)構(gòu)名稱：",
},
// 控制popover顯隱的屬性
visible: {
type: Boolean,
default: false,
},
// 列表數(shù)據(jù)
list: {
type: Array,
default: () => {
return [];
},
},
// 列表loading
listLoading: {
type: Boolean,
default: false,
},
// 列表屬性1
nameProp: {
type: String,
default: "",
},
// 列表label 1
nameLabel: {
type: String,
default: "機(jī)構(gòu)名稱",
},
// 另一個(gè)屬性把将。有就為true焰枢，妹有就false
// 這頁(yè)只顯示一列機(jī)構(gòu)名兒，別的頁(yè)面有時(shí)會(huì)要求顯示電話啊啥的
other: {
type: Boolean,
default: false,
},
otherProp: {
type: String,
default: "",
},
otherLabel: {
type: String,
default: "機(jī)構(gòu)聯(lián)系電話",
},
// 分頁(yè)所需參數(shù)
params: {
type: Object,
default: () => {},
},
// 輸入框內(nèi)容
inputValue: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "請(qǐng)選擇機(jī)構(gòu)",
},
total: {
type: Number,
default: 0,
},
},
methods: {
// 點(diǎn)擊行
changeTableRow(row) {
this.inputValue = row[this.nameProp]; // input中顯示列表中選擇的數(shù)據(jù)
this.code = row[this.otherProp]; // 保存選中行的code
this.visible = false; // 選中行則popover消失
},
// 獲取數(shù)據(jù)
getList() {
this.$emit("getList", this.params);
},
// 改變input值
onChange(value) {
if (value == "") {
this.code = "";
}
this.$emit("onChangeOrganizeValue", value);
},
},
};
</script>
<style lang="scss" scoped>
.el-input {
width: 140px;
}
.title-label {
display: inline-block;
text-align: right;
color: #606266;
font-size: 14px;
font-weight: bold;
}
.popover {
background: red;
}
</style>
父組件 ??
template 中 ↓
<el-form-item>
<select-pagination
:list="agencyList"
:listLoading="agencyLoading"
:nameProp="'name'"
:params="agency"
:other="false"
:total="totalAgency"
@getList="getAgency"
@onChangeOrganizeValue="changeAgencyInput"
></select-pagination>
</el-form-item>
script 中 ↓
<script>
import SelectPagination from "@/components/selectPagination/selectPagination";
export default {
data() {
return {
agencyList: [], // 放數(shù)據(jù)的數(shù)組兒
// 請(qǐng)求參數(shù)
agency: {
pageNum: 1,
pageSize: 8,
condition: "", // 輸入框兒輸入申請(qǐng)符合條件的數(shù)據(jù)
},
totalAgency: 0, // 分頁(yè)的總數(shù)兒
agencyLoading: false, // 列表兒的loading圈兒~
};
},
methods: {
getAgency() {
this.agencyLoading = true;
// getAgencyList 為接口名兒
// this.agency是請(qǐng)求參數(shù)的對(duì)象兒
getAgencyList(this.agency).then((res) => {
if (res.code == 200 && res.success) {
this.agencyList = res.content;
this.totalAgency = res.totalCount;
this.agencyLoading = false;
} else {
this.$message("暫無(wú)機(jī)構(gòu)");
this.agencyList = [];
this.totalAgency = 0;
this.agencyLoading = false;
}
});
},
changeAgencyInput(value) {
if (value == "") {
// 如果輸入框兒為空則清空之前選中機(jī)構(gòu)后賦值的參數(shù)
this.listQuery.code = "";
this.agency.condition = "";
this.getAgency();
} else {
// 賦值
this.agency.condition = value;
this.getAgency();
}
},
},
mounted() {
this.getAgency();
},
components: { SelectPagination },
};
</script>
最后叮囑一句徽级，最好不要直接在父組件中控制子組件的inputValue气破。會(huì)有很多問(wèn)題都是血的教訓(xùn)哈哈哈哈哈哈哈
如果現(xiàn)在有二級(jí)聯(lián)動(dòng)的需求，選擇左邊的數(shù)據(jù)餐抢，更改右邊的數(shù)據(jù)现使。
那么點(diǎn)擊左側(cè)的列表選定一個(gè)值，右側(cè)才可以進(jìn)行操作旷痕。左側(cè)換值碳锈，右側(cè)清空。
這個(gè)時(shí)候欺抗，我們不要直接用inputValue來(lái)操縱輸入框的值售碳。最好再設(shè)置一個(gè)其他的變量，比如flag绞呈。
如果左邊傳的值發(fā)生變化贸人，父組件中的this.flag = !this.flag
在子組件中watch這個(gè)flag
watch: {
flag(n,o) {
if(n != o) {
this.inputValue = '';
}
}
}
