¿Cómo se da cuenta la tabla el-en element-ui de la omisión del contenido en exceso y agrega indicaciones de información sobre herramientas?


Inserte la descripción de la imagen aquí
Descripción del efecto de las representaciones:
solo el título con más de 10 palabras mostrará el-tooltip, y los que no
superen las 10 palabras no se mostrarán Idea: Los datos de la tabla superan las 10 palabras, mostrar y ocultar, usar el efecto de desplazamiento para mostrar el-tooltip y mostrar todo el código de texto
:

     <el-table-column label="标题" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.title"
              placement="bottom"
              popper-class="tips"
            >
              <span v-if="scope.row.title.length >= 10">{
   
   {
                scope.row.title
              }}</span>
            </el-tooltip>
            <span v-if="scope.row.title.length < 10">{
   
   {
              scope.row.title
            }}</span>
          </template>
     </el-table-column>
/deep/.el-table td {
    border-bottom: 1px solid #2E2C3D;
    background: #242133;

    .cell span {
        display: block;
        width: 10em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

** Consejos: ** También se puede lograr cambiando la unidad em en el estilo de celda a ancho, según los requisitos.

Supongo que te gusta

Origin blog.csdn.net/lqlq54321/article/details/110818900
Recomendado
Clasificación