elementui的选择器的下拉框底部按钮事件和修改样式可能遇到问题

elementui的选择器 select

下拉内容底部常现固定按钮 如新增

那么我们可以使用 solt 插槽或者自定义，这次我们使用自定义

<el-select v-modol="selectValue" @visible-change="handleChange">
	//下拉内容
	<el-option v-for= "item in options" :key="item.value" :label="item.label" :value="item.value">
	</el-option>
	//自定义的按钮
	<div calss="custom-footer" v-show="dropdownVisible">
		<el-button>新增</el-button>
	</div>
</el-select>

<scrpit>
export default {
	data(){
		selectValue:'',
		options:[],
		dropdownVisible:false,
	},
	menthod:{
		handleChange(val){
		this.dropdownVisible = val
	}
}
</scrpit>

自定义按钮，需要通过选择器的visible-change方法来显示底部按钮，如果没有这个方法的话直接添加div自定义会不出现底部按钮。

这里还有个问题，就是下拉选择项为空数组呢，这时候就会出现下拉框内容只展示无数据内容，没有出现底部按钮。

那我通过修改无数据下拉框样式改为隐藏，和底部按钮为常见，修改样式

<el-select v-modol="selectValue" @visible-change="handleChange">
	//下拉内容
	<el-option v-for= "item in options" :key="item.value" :label="item.label" :value="item.value">
	</el-option>
	//自定义的按钮
	<div calss="custom-footer" v-show="dropdownVisible">
		<el-button>新增</el-button>
	</div>
</el-select>

<scrpit>
export default {
	data(){
		selectValue:'',
		options:[],
		dropdownVisible:false,
	},
	menthod:{
		handleChange(val){
		this.dropdownVisible = val
	}
}
</scrpit>
<style lang="scss" scoped>
::v-deep .el-sclollbar{
	display: block !important;
}
::v-deep .el-select-dropdown_empty{
	display: none;
}
</style>

注意：style中需要去掉 scoped！！！ 否则无效

如果一定要用 scoped 该怎么办呢？

到这里，我以为是可以了，但是运行起来还是不行，就看文档，发现有select的有个属性需要修改

可以用 :popper-append-to-body=“false” 属性+ Css /deep/ el-select-dropdown

<el-select v-modol="selectValue" @visible-change="handleChange" :popper-append-to-body="false" >
	//下拉内容
	<el-option v-for= "item in options" :key="item.value" :label="item.label" :value="item.value">
	</el-option>
	//自定义的按钮
	<div calss="custom-footer" v-show="dropdownVisible">
		<el-button>新增</el-button>
	</div>
</el-select>

<scrpit>
export default {
	data(){
		selectValue:'',
		options:[],
		dropdownVisible:false,
	},
	menthod:{
		handleChange(val){
		this.dropdownVisible = val
	}
}
</scrpit>
<style lang="scss" scoped>
::v-deep .el-sclollbar{
	display: block !important;
}
::v-deep .el-select-dropdown_empty{
	display: none;
}
</style>

解决了