前沿
仅记录自己平时遇到的问题以及解决方案,做个备注,仅此而已。
el-select自定义模板中文字过长
下面是官网示例:
将自定义的 HTML 模板插入el-option的 slot 中即可。
<template>
<el-select v-model="value" placeholder="请选择">
<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>
</template>
<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: ''
}
}
}
</script>
接下来是项目中示例以及解决方案:
<el-select v-model="projectValue" filterable placeholder="请选择">
<el-option
v-for="item in projectOptions"
:key="item.projectId"
:label="item.projectCode"
:value="item.projectId">
<div style="float: left">{{ item.projectCode }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">
<el-tooltip effect="dark" :disabled="isShowTooltip" :content="item.projectName" placement="top">
<div class="option-item" @mouseover="spanMouseenter($event)">
{{ item.projectName }}
</div>
</el-tooltip>
</div>
</el-option>
</el-select>
data(){
return {
isShowTooltip: true
}
}
methods:{
spanMouseenter(e) {
let target = e.target
if (target.clientWidth < target.scrollWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
}
<style>
.option-item {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: right;
margin-left: 20px;
}
</style>
在自定义选择器中,我们选择用固定宽度和省略号一起解决文字过长的问题。
结束语
今日的努力,是为了不再重复痛苦的过去。