vue组件 下拉框分页
上图 ????
下拉框分页.png
和公司签了保密协议啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈所以我把数据全部马赛克了哈哈哈哈哈哈哈哈哈哈哈尼萌就当有就成~~
输入框前面有个label，和页面中的其他label保持一致；分页的组件是vue-element-admin中自带的pagination，用elementui的el-pagination也可~~一样的道理反正就是各种传值
组件内容 ↓
<template>
<div class="container-select">
<!-- 这部分是label -->
<span class="title-label" :style="{ width: labelWidth }">{{ label }}</span>
<!-- 这部分是点击输入框跳出来的分页小弹窗 -->
<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>// 这是分页组件。。用el-pagination也可以
import smallPagination from "@/components/Pagination/withoutNumber.vue";
export default {
components: {
smallPagination,
},
props: {
labelWidth: {
type: String,
default: "70px",
},
label: {
type: String,
default: "机构名称：",
},
// 控制popover显隐的属性
visible: {
type: Boolean,
default: false,
},
// 列表数据
list: {
type: Array,
default: () => {
return [];
},
},
// 列表loading
listLoading: {
type: Boolean,
default: false,
},
// 列表属性1
nameProp: {
type: String,
default: "",
},
// 列表label 1
nameLabel: {
type: String,
default: "机构名称",
},
// 另一个属性。有就为true，妹有就false
// 这页只显示一列机构名儿，别的页面有时会要求显示电话啊啥的
other: {
type: Boolean,
default: false,
},
otherProp: {
type: String,
default: "",
},
otherLabel: {
type: String,
default: "机构联系电话",
},
// 分页所需参数
params: {
type: Object,
default: () => {},
},
// 输入框内容
inputValue: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "请选择机构",
},
total: {
type: Number,
default: 0,
},
},
methods: {
// 点击行
changeTableRow(row) {
this.inputValue = row[this.nameProp]; // input中显示列表中选择的数据
this.code = row[this.otherProp]; // 保存选中行的code
this.visible = false; // 选中行则popover消失
},
// 获取数据
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: [], // 放数据的数组儿
// 请求参数
agency: {
pageNum: 1,
pageSize: 8,
condition: "", // 输入框儿输入申请符合条件的数据
},
totalAgency: 0, // 分页的总数儿
agencyLoading: false, // 列表儿的loading圈儿~
};
},
methods: {
getAgency() {
this.agencyLoading = true;
// getAgencyList 为接口名儿
// this.agency是请求参数的对象儿
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("暂无机构");
this.agencyList = [];
this.totalAgency = 0;
this.agencyLoading = false;
}
});
},
changeAgencyInput(value) {
if (value == "") {
// 如果输入框儿为空则清空之前选中机构后赋值的参数
this.listQuery.code = "";
this.agency.condition = "";
this.getAgency();
} else {
// 赋值
this.agency.condition = value;
this.getAgency();
}
},
},
mounted() {
this.getAgency();
},
components: { SelectPagination },};</script>最后叮嘱一句，最好不要直接在父组件中控制子组件的inputValue。会有很多问题都是血的教训哈哈哈哈哈哈哈
如果现在有二级联动的需求，选择左边的数据，更改右边的数据。
那么点击左侧的列表选定一个值，右侧才可以进行操作。左侧换值，右侧清空。
这个时候，我们不要直接用inputValue来操纵输入框的值。最好再设置一个其他的变量，比如flag。
如果左边传的值发生变化，父组件中的this.flag = !this.flag
在子组件中watch这个flag
watch: {
flag(n,o) {
if(n != o) {
this.inputValue = '';
}
}}tada~~~一个下拉框分页的组件就完成啦~
作者：北方的林檎
链接：https://www.jianshu.com/p/833dfc3ef288