效果图:
实现方法:
思路:利用el-select组件的 prefix Select 组件头部内容 插槽属性。因为prefix插槽位置在左边,所以需要改变prefix插槽样式,使内容放到右侧。又因为prefix插槽默认样式有一个left: 5px属性,所以导致我们在使用right时,不能直接有效地把插槽放到右边去。此时我们就需要更改elementUI样式的源代码。在所有css文件中,找到el-input__prefix类,删掉left: 5px属性。如果后续想要在某个地方使用到el-input__prefix类的left样式,直接在对应的vue文件添加覆盖即可。
样式源代码路径
- 未自定义elementUI主题颜色:在 node_modules / element-ui / lib / theme-chalk
- 自定义elementUI主题颜色:在src / theme / element(点击前往:自定义elementUI主题样式颜色)
删掉elementUI的源代码left:5px样式后,我们再在APP.vue文件里写css代码,把插槽内容放到右侧去:
<el-select
v-model="form.warning"
class="select-prefix"
filterable
allow-create
default-first-option
>
<el-option label="1.8" :value="1.8" />
<el-option label="2.8" :value="2.8" />
<el-option label="4.5" :value="4.5" />
<el-option label="7.1" :value="7.1" />
<template slot="prefix">mm/s</template>
</el-select>
.select-prefix .el-input__prefix{
right: 30px;
cursor: pointer;
}