Cenário do projeto:
提示:这里简述项目相关背景:
O requisito é modificar o conteúdo diretamente no formulário, então slots são usados no formulário para inserir a caixa de entrada no formulário. Quando o conteúdo é muito longo, o usuário deseja mover o mouse para dentro da bolha para visualizar o conteúdo completamente.
Descrição do Problema
提示:这里描述项目中遇到的问题:
Quando o conteúdo da caixa de entrada no formulário é muito longo, o conteúdo completo não pode ser visto quando o mouse é movido e a bolha será inválida.
<el-table-column
:show-overflow-tooltip="true"
align="center"
prop="name"
width="160px"
label="名称">
<template slot-scope="scope">
<el-input placeholder="请输入" clearable v-model="scope.row.name"></el-input>
</template>
</el-table-column>
Análise de causa:
Se o atributo show-overflow-tooltip for usado em el-table, a dica de ferramenta será exibida quando o conteúdo for muito longo e oculto. Se o modelo de slot de escopo for usado, o conteúdo da dica de exibição definido por show-overflow-tooltip será afetam apenas o conteúdo div do próximo nível. Isso não funcionará no texto.
solução:
Adicione texto ao slot e oculte-o, e a função de bolha retornará ao normal.
<el-table-column
:show-overflow-tooltip="true"
align="center"
prop="name"
width="160px"
label="名称">
<template slot-scope="scope">
<span style="display: block;overflow: hidden;height: 0;">{
{
scope.row.name}}</span>
<el-input placeholder="请输入" clearable v-model="scope.row.name"></el-input>
</template>
</el-table-column>