废话不多说，先看效果：

实现原理： 下拉框组件整体position: absolute居于父元素下方，利用before和after生成左上方三角形。注意父元素要加上position属性

代码如下：

<template>
	<div class="dropdown" :style="{display: show ? 'block' : 'none'}">
		<block v-for="(item, index) in list" :key="index">
			<div class="dropdown-item" v-for="(item2, index2) in item" :key="index2">
				{{item2}}
			</div>
			<div class="line"></div>
		</block>
	</div>
</template>

<script>
	export default {
		props: {
			// 模拟数据二维数组，可根据实际情况更改
			//list: [
			//		['login', 'logout', 'set'],['link']
			//	]
			list: {
				type: Array,
				default: () => []
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.dropdown {
		position: absolute;
		left: 0;
		top: 40px;		
		min-width: 130px;
		border: 1px solid rgba(0,0,0,.1);
		border-radius: 10px;
		background: white;
		
		.dropdown-item {
			width: 100%;
			height: 50px;
			line-height: 50px;
			padding: 0 10px;
			box-sizing: border-box;
			text-align: center;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		
		.line {
			width: 100%;
			height: 1px;
			background: rgba(0,0,0,.1);
		}
		
		&::before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: 10px solid rgba(0,0,0,.2);
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			left: 10px;
			top: -10px;
		}
		
		&::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-bottom: 10px solid #FFFFFF;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			left: 10px;
			top: -9px;
		}
	}
</style>