element里面的el-cascader
组件宽度会根据里面的数据自动延伸,也就导致了一下这种情况
这个时候咋们可以直接设置他的最大宽度,就可以限制他的自由延伸
.el-cascader-node {
max-width: 250px;
}
这个语句不能写在scoped里面,会失效
但是这也有一个新的问题,那就是有部分内容被遮挡,这个时候就需要我们的另一个组件上场了——el-tooltip
咱们使用el-cascader
里面的插槽,对文本直接进行处理,限制长度大于12就有内容提示。
<el-cascader
v-model="value"
:options="list">
<template slot-scope="{ data }">
<el-tooltip
:disabled="data.label.length < 12"
class="item"
effect="dark"
:content="data.label"
placement="right"
>
<span>{{ data.label }}</span>
</el-tooltip>
</template>
</el-cascader>
注意:有时候会导致提示组件定位不准确,需要手动调整!