需求是实现el-input固定:rows=5,在正常内容超长的情况下显示省略号,并且鼠标放在上面是显示tooltip,点击获取到焦点时显示完整内容。
以下是具体实现方式:
(1)el-input外边套一个el-tooltip
(2)内容通过css控制超长显示省略号,失去焦点时使css生效,获取到焦点时使css失效显示完整内容。
html代码:
<el-form-item label="备注:" prop="feeDetremarks">
<el-tooltip
class="box-item"
effect="dark"
placement="top-start"
:disabled="feeDetremarksInputClass">
<template #content>
<div style="width: 100%">{
{ basicInfoFormModel.feeDetremarks }}</div>
</template>
<el-input
v-model="basicInfoFormModel.feeDetremarks"
:readonly="basicInfoFormModel.currentApprovalNode != '00'"
type="textarea"
resize="none"
:rows=