elementui table 超出省略溢出处理+tooltips

内容纲要

el-table增加:

:row-style="{height: '50px'}"
        :cell-style="{padding: '0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}"

el-table-column增加:

:show-overflow-tooltip="true"

增加省略号

浮动显示框更改样式

.el-tooltip__popper{font-size: 14px; max-width:40% }/* 设置显示隐藏部分内容,按40%显示 */

合并demo代码

<el-table
        ref="tableref"
        @selection-change="handleSelectionChange"
        :data="tableData"
        row-key="id"
        size="mini"
        style="width: 100%;margin-top:10px;"
        :row-style="{height: '50px'}"
        :cell-style="{padding: '0', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}"
    >
    <el-table-column
          align="center"
          prop="cmt"
          label="描述"
          :show-overflow-tooltip="true"
      >
      </el-table-column>
</el-table>

Leave a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注

close
arrow_upward