A tabela el-table usa o atributo slot show-overflow-tooltip para falhar

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>

Supongo que te gusta

Origin blog.csdn.net/weixin_46054723/article/details/130261453
Recomendado
Clasificación