zoukankan      html  css  js  c++  java
  • eltable单元格换行显示,超出部分省略号

    实际开发中,会遇到表格的内容太长了,elementui中的表格,会进行自动换行处理;

    此时表格的高度就会发生变化 这样就不美观。

    如下图所示:

     

    解决方法1:超出部分用省略号显示

    el-table是有这个控制属性的 :show-overflow-tooltip=“true”(超出一行显示省略号)

    <el-table-column
            prop="address"
            label="地址"
            show-overflow-tooltip  
    /el-table-column>

    存在问题:show-overflow-tooltip可以实现省略号,但是只能单行显示,不能换行。

    解决方法2(推荐): 借助插槽和el-tooltip去实现

      <el-table-column  prop="address" label="地址">
           <template slot-scope="scope">
              <el-tooltip :content="scope.row.address" placement="top">
                <p class="descStyle">{{ scope.row.address }}</p>
              </el-tooltip>
            </template>
      </el-table-column>
    .descStyle {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 3; //行数
      -webkit-box-orient: vertical;
    }

  • 相关阅读:
    idea2020 安装
    739. 每日温度
    图像翻转
    257. 二叉树的所有路径
    1466. 重新规划路线
    面试题 04.05. 合法二叉搜索树
    671. 二叉树中第二小的节点
    965. 单值二叉树
    648. 单词替换
    137. 只出现一次的数字 II
  • 原文地址:https://www.cnblogs.com/jiayuexuan/p/15699398.html
Copyright © 2011-2022 走看看