使用element-ui中的el-select组件实现prefix更改Select 组件头部内容，可以更改select选中的文本内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用element-ui中的el-select组件实现prefix更改Select 组件头部内容</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 100px;
}
</style>
</head>
<body>
<div id="app">
<el-select @change="changeDrugLotFun" v-model="value" placeholder="" clearable>
<template slot="prefix">
<div v-if="value" class="select-prefix">
{{ `${itemObj.label}(英文：${itemObj.value})` }}
</div>
<!-- 替换placeholder -->
<div v-else>
请选择
</div>
</template>
<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: '',
itemObj: {}
}
},
mounted() {
},
methods: {
changeDrugLotFun(val) {
this.itemObj = this.cities.find(
(item) => item.value == this.value
) || {};
}
}
})
</script>
</body>
<style>
/* 隐藏input的值，否则文字会重叠 */
.el-input--prefix .el-input__inner {
color: transparent;
}
/* 根据项目实际调整位置 */
.el-input__prefix {
top: 4px;
left: 10px;
line-height: 30px;
height: 30px;
color: #606266;
}
</style>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。