基于vue下拉框展示table的组件

借鉴于其他博主：

https://blog.csdn.net/cjj1065770310/article/details/126145703

<template>
	<div class="selectCompents">
		<div class="selectBox">
			<div class="inputBox" @mouseenter="enter" @mouseleave="leave" :class="borderFlag ? 'focus':''"
				@click="handle_showClick"
				:style="{backgroundColor:bgColor+'!important',border:border,color:color+'!important'}">
				<input ref="inpVal" id="select" class="selectText" readonly type="text" @blur.stop="bulrSelect"
					v-model="value" :placeholder="placeholder" />
					<a-icon type="down" v-show="clearFlag==false" :class="showSelect ? 'roateOne':'roateTwo'" class="iconBox icon-dwon">
					
				</a-icon>
				<a-icon type="close-circle"  @click.stop="handle_clear" v-show="clearFlag" class="iconBox ">
				</a-icon>
			</div>
			<transition name="select">
                <table class="selectUl" v-show="showSelect" @mouseenter="enterOtions" @mouseleave="leaveOptions"
                style="width: 100%; border-color: #ccc; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0">
                    <thead>
                    <tr>
                        <th>TYPE</th>
                        <th>NAME</th>
                        <th>VALUE</th>
                        <th>ENABLED</th>
                        <th>DESCRIPTION</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr :class="item.activeClass" v-for="(item,index) in list" :key="item.value"
						@click.stop="choose(item,index)">
							<td>{{ item.description}}</td>
							<td>{{ item.enabled}}</td>
							<td>{{ item.name}}</td>
							<td>{{ item.type}}</td>
							<td>{{ item.value}}</td>
                    </tr>
                    </tbody>
                </table>
			</transition>
		</div>
 
	</div>
</template>
 
<script>
/*//调用时候请在外层包裹一个div标签，然后组件会继承div标签的高度和宽度
修改样式请用样式穿透例如:字体大小
.home(父组件)::v-deep .selectText(子组件需要改变的样式的类名){
}
配置项:
1.clear(清除按钮,例如:clear="true")
2.bgColor(设置背景颜色，例如bgColor='red')
3.border(设置边框,例如border="1px solid black")
4.color(设置select框字体颜色,例如color="blue")
5.placeholder(设置默认显示语句,例如placeholder="xxxxxxxxxxx")
6.downicon,clearicon,checkicon,checkedicon(图标，如需更换图标请自行申请iconfot项目，然后把index.css里面的链接替换成你的链接)
7.recevie(可以接收一个从父组件传来的函数，并且可以调用:recevie="recevie")
8.chooseMore(设置是否开启多选的配置项，例如:chooseMore="true")
9.@change="xxx"(xxx是一个函数,接收select组件传递的值)
*/
	export default {
		name: 'HelloWorld',
		props: {
			list: {
				type:Array,
				default:[{"id":6,"type":"Multi","name":"StepType","value":"Measure","enabled":"T","description":"Step Type for setup sampling"},{"id":7,"type":"Multi","name":"StepType","value":"YieldEnhancement","enabled":"T","description":"Step Type for setup sampling"},{"id":8,"type":"Multi","name":"StepType","value":"Inspection","enabled":"T","description":"Step Type for setup sampling"}],
			},
			recevie: Function,
			bgColor: {
				type: String,
				default: ''
			},
			border: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'black'
			},
			placeholder: {
				type: String,
				default: '请选择选项'
			},
			downicon: {
				type: String,
				default: 'icon-xialajiantouxiao'
			},
			clearicon:{
				type:String,
				default:'icon-close'
			},
			clear: {
				type: Boolean,
				default: false,
			},
			chooseMore: {
				type: Boolean,
				default: false
			},
			checkicon: {
				type: String,
				default: 'icon-fuxuankuang'
			},
			checkedicon:{
				type:String,
				default:'icon-fuxuankuang1'
			}
		},
		components: {},
		created() {
			if (this.chooseMore) {
				this.list.forEach((item) => {
					item.checked = false
					item.activeClass = ''
				})
			}
 
		},
		data() {
			return {
				value: '',
				inputValue: '',
				key: '',
				showSelect: false,
				borderFlag: null,
				selectFlag: false,
				clearFlag: false,
				// clearImg: {
				// 	path: require('./close.svg')
				// },
				checked: false,
				checkedList: [],
			}
		},
		methods: {
			//选中事件
			choose(item, index) {
				this.$refs.inpVal.focus();
				if (this.chooseMore) {
					item.checked = !item.checked
					if (item.checked) {
						item.activeClass = 'active'
						this.checkedList.push(item)
					} else {
						item.activeClass = ''
						for(let i=0;i<this.checkedList.length;i++){
							if(this.checkedList[i].value==item.value){
								this.checkedList.splice(i, 1)
							}
						}
					}
					let value = []
					this.checkedList.forEach((item) => {
						value.push(item.value)
					})
					this.value = value
					this.$emit('change', this.checkedList)
				} else {
					this.key = index
					for (let i = 0; i < this.list.length; i++) {
						if (this.key == i) {
							this.list[i].activeClass = 'active'
						} else {
							this.list[i].activeClass = ''
						}
					}
					this.value = this.list[index].value
					this.showSelect = false
					let obj = item
					this.$emit('change', obj)
				}
				this.borderFlag = false
				// let more=document.getElementsByClassName('moreBox')
				// console.log(more[0].clientHeight)
			},
			//是否展示下拉框事件
			handle_showClick() {
				this.showSelect = !this.showSelect
				if (this.showSelect) {
					this.borderFlag = true
				} else {
					this.borderFlag = false
				}
			},
			focusSelect() {},
			focusOption() {},
			//失去焦点事件
			bulrSelect() {
				if (this.selectFlag) {
					this.showSelect = true
				} else {
					this.showSelect = false
				}
			},
			showFocus() {
			},
			//移入事件
			enterOtions() {
				this.selectFlag = true
			},
			//移入事件
			leaveOptions() {
				this.selectFlag = false
			},
			//移入事件
			enter() {
				this.borderFlag = true
				if (this.value != '' && this.showSelect == false && this.clear === true) {
					this.clearFlag = true
					console.log(this.clear)
				}
			},
			//移出事件
			leave() {
				if (this.showSelect) {
					this.borderFlag = true
				} else {
					this.borderFlag = false
				}
				this.clearFlag = false
			},
			//清除按钮
			handle_clear() {
				console.log('22222')
				this.list.forEach((item) => {
					item.checked = false
					item.activeClass = ''
				})
				this.value = ''
				if (this.chooseMore) {
					this.checkedList = []
				} else {
					this.key = ''
				}
				this.$emit('change', this.checkedList)
			},
			//多选事件
			handle_checked(index) {
 
				console.log(this.list)
			}
		}
	}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped >
	.selectCompents {
		height: 100%;
 
		ul,
		li {
			list-style: none;
			margin: 0;
			padding: 0;
		}
 
		.selectBox {
			width: 100%;
			height: 100%;
 
			.inputBox {
				// padding: 0 10px;
				background-color: white;
				cursor: pointer;
				display: flex;
				align-items: center;
				height: 100%;
				border: 1px solid rgb(220, 223, 230);
				border-radius: 3px;
				position: relative;
				z-index: 0;
 
				.selectText {
					padding: 0 0 0 10px;
					display: block;
					// height: 30px;
					height: 100%;
					cursor: pointer;
					outline: none;
					border: none;
					width: 100%;
					border-radius: 3px;
					z-index: 1000;
					background-color: transparent !important;
				}
 
				.icon-dwon {
					position: absolute;
					right: 0px;
					z-index: 1;
				}
 
				.iconBox {
					padding: 0 10px;
					height: 100%;
					display: flex;
					align-items: center;
 
					.iconStyle {
						cursor: pointer;
						color: rgb(196, 192, 204);
					}
				}
 
			}
 
			.focus {
				border: 1px solid rgb(196, 192, 204) !important;
			}
 
			.roateOne {
				transform: rotate(180deg);
				transition: .1s linear;
			}
 
			.roateTwo {
				transform: rotate(360deg);
				transition: .1s linear;
			}
 
			.select-enter,
			.select-leave-to {
				transform: scaleY(0);
			}
 
			.select-enter-to,
			.select-leave {
				transform: scaleY(1);
			}
 
			.selectUl::-webkit-scrollbar {
				display: none;
			}
 
			.selectUl {
				height: 200px;
				overflow-y: scroll;
				box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
				transition: 0.1s linear;
 
				.selectLi {
					text-align: left;
					cursor: pointer;
					padding: 5px 8px;
					display: flex;
					align-items: center;
 
					.optionsText {
						border: none;
						background-color: transparent;
						width: 100%;
						cursor: pointer;
						outline: none;
						padding: 0;
						margin-left: 5px;
					}
 
					.iconStyle-Check {}
				}
 
				.selectLi:first-child {
					margin-top: 0;
				}
 
				.selectLi:hover {
					background-color: rgb(245, 247, 250);
				}
 
				.active {
					color: blue;
				}
			}
		}
	}
th {
  font-size: 14px;
}
tr {
  height: 40px;
  text-align: center;
}
td {
  text-align: center;
}
</style>