project.Vue
//子页面1
<template>
<div>
<el-select :value="defaultValue" :loading="loading" :multiple="multiple" :placeholder="placeholder"
:allow-create="allowCreate" :isConcatShowText="isConcatShowText" filterable remote clearable default-first-option :remote-method="remoteMethod"
style="width: 100%;" @input="handleInput" @visible-change="visibleChange" @change="change"
@clear="clearChange">
<el-option v-for="(item, index) in optionsList" :key="'s' + index" :label="isConcatShowText==true?concatenatedLabel2(item):concatenatedLabel(item)"
:value="item[valueString]">
{{ concatenatedLabel(item) }}
</el-option>
<el-pagination class="select-pagination" @size-change="handleSizeChange"
@current-change="handleCurrentChange" :current-page.sync="localCurrentPage" :page-size="pageSize"
:total="total" layout="prev, pager, next, total"></el-pagination>
</el-select>
</div>
</template>
<script>
export default {
name: 'CustomSelect',
props: {
defaultValue: {
type: [Number, String, Array],
default: null
},
loading: {
type: Boolean,
default: false
},
拼接后 被选择后输入框是否显示拼接的字符串
isConcatShowText:{
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: 'Please select'
},
allowCreate: {
type: Boolean,
default: false
},
remoteMethod: {
type: Function,
default: null
},
optionsList: {
type: Array,
default: () => []
},
label: {
type: String,
default: 'label'
},
labelTwo: {
type: String,
default: ''
},
labelThree: {
type: String,
default: ''
},
labelFour: {
type: String,
default: ''
},
valueString: {
type: String,
default: 'value'
},
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
total: {
type: Number,
default: 0
},
},
watch: {
// 监听 prop 的变化，并更新本地数据属性
currentPage(newValue) {
this.localCurrentPage = newValue;
}
},
data() {
return {
localCurrentPage: 1
}
},
methods: {
handleInput(value) {
this.$emit('input', value);
},
visibleChange(visible) {
this.$emit('visible-change', visible);
},
change(value) {
this.$emit('change', value);
},
clearChange() {
this.$emit('clear');
},
handleSizeChange(size) {
this.$emit('size-change', size);
},
handleCurrentChange(page) {
this.$emit('current-change', page);
},
concatenatedLabel(item) {
return [item[this.label], item[this.labelTwo], item[this.labelThree], item[this.labelFour]].filter(Boolean)
.join(' || ');
},
concatenatedLabel2(item) {
return item[this.label]
}
}
};
</script>
<style scoped>
.select-pagination {
margin-top: 10px;
}
</style>
projectParent.Vue
<template>
<!-- 所有的项目 也可以单独用这个页面 -->
<div>
<!-- is-concat 是否拼接字符串 concat-symbol拼接字符 allowCreate是否允许创建条目 默认显示多少条 是否多选 -->
<projectSelect :defaultValue="selectedValue" :loading="isLoading" :multiple="isMultiple"
:isConcatShowText="isConcatShowText" :placeholder="placeholder" :allowCreate="allowCreation"
:remoteMethod="remoteFetch" :optionsList="options" label="projectCode" labelTwo="name" labelThree=""
labelFour="" :valueString="valueString" :currentPage="currentPages" :pageSize="pageSize" :total="totalItems"
@input="handleInput" @visible-change="handleVisibleChange" @change="handleChange" @clear="handleClear"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</template>
<script>
import projectSelect from './project.vue';
//管理员查看往来单位
import {
listInfo
} from "@/api/project/index.js"; //客户
export default {
name: 'ParentComponent',
components: {
projectSelect
},
props: {
index: {
type: Number,
default: 0
},
placeholder: {
type: String,
default: '请选择'
},
valueString: {
type: String,
default: 'id'
},
selectedVal: {
default: null
}
},
watch: {
selectedVal: {
handler(val, oldVal) {
this.selectedValue = val
},
immediate: true,//为要监视的prop添加immediate属性并设置为true，可以使得watch函数在组件创建时立即执行一次
deep: true
}
},
data() {
return {
querySearch:null,
isConcatShowText: true, //拼接后 被选择后输入框是否显示拼接的字符串
selectedValue: [], // 如果是多选，则为数组；否则为单个值
isLoading: false,
isMultiple: false, // 是否允许多选
allowCreation: false, // 是否允许用户创建新选项
options: [], // 选项列表，应从服务器或本地获取
currentPages: 1, // 当前页码
pageSize: 6, // 每页显示的数量
totalItems: 0, // 总项目数，用于分页
};
},
mounted() {
this.remoteFetch()
},
methods: {
remoteFetch(query) {
if(query){
this.querySearch=query
}
let that = this
// 远程获取数据的函数，根据 query 参数进行搜索
this.isLoading = true;
// 假设 fetchData 是一个从服务器获取数据的函数
listInfo({
isStop:0,//0否 1是 是否停用
search: this.querySearch,
pageSize: that.pageSize,
pageNum: that.currentPages
}).then(response => {
//每次进入后 数据都是重新填充
if (response.rows.length < 1) {
this.selectedValue = []; // 清空已选值
}
that.options = response.rows;
that.totalItems = response.total;
this.isLoading = false;
});
},
handleInput(value) {
// 处理输入事件，更新 selectedValue
this.selectedValue = value;
this.$emit('handleInput', value);
},
handleVisibleChange(visible) {
// 处理下拉菜单的可见性变化
this.currentPages = 1;
this.remoteFetch(); // 可能需要重新获取当前页的数据
},
handleChange(value) {
this.querySearch=null
// 处理选项变化事件
this.$emit('handlePageChange', value);
},
handleClear() {
this.querySearch=null
// 处理清除事件
this.selectedValue = []; // 清空已选值
this.$emit('clear', this.index);
// this.$parent.productClear(this.index)
},
handleSizeChange(size) {
// 处理每页显示数量变化事件
this.pageSize = size;
this.remoteFetch(this.querySearch); // 可能需要重新获取当前页的数据
},
handleCurrentChange(page) {
// 处理当前页码变化事件
this.currentPages = page;
this.remoteFetch(this.querySearch); // 获取当前页的数据
}
},
// 其他逻辑和生命周期钩子...
};
</script>
<style scoped>
/* 父组件的样式 */
</style>
最后在页面引用(因为我很多页面用到了，所以用了projectSelect 组件
<el-form>
<el-form-item label="项目" prop="projectName">
<project-select class="width100bfb" valueString="id" :selectedVal="form.projectName" @clear='projectClear()' @handlePageChange="projectChange($event)" placeholder="请选择项目" />
</el-form-item>
</el-form>
<script>
import projectSelect from '@/views/components/elSelect/projectParent'
export default {
components: {
projectSelect
},
methods: {
/**项目列表change*/
projectChange(val) {
if (val) {
//根据自己情况去调用接口
//getProjectInfo(val).then(res => {
// this.form.projectName = res.data.name
//})
}
},
/*清除项目**/
projectClear() {
//根据自己情况去设置
//this.form.projectName = null
},
}
}
</script>