文章目录

  • 前言
  • 一、问题描述
  • 二、解决办法
  • 总结


前言

好久没写博客了，之前说好的每日一更，现在已经快一个月了，还是人太懒了吧，终于找到工作了，在公司实习搞前端开发，具体是什么公司就不说了。为了实习工作这将近一个月左右时间，出来找出租房又是整学校的材料啥的，耽误太多时间了，学校也还有个项目没搞完。实惨T^T. 好了也不废话了，既然能找到这篇博客，说明你也遇到了相同的问题，说不定可以在我这里找到解决方法，下面就看看我的方法吧，虽然不是最好的办法，但是对我来说能解决问题就行，哈哈哈。

一、问题描述

element table加载附表数据 element table 插槽_css


在公司开发中碰到一个问题，是关于表格展示，由于一个单元格中文字较多，设置宽度后会导致其文字多行显示，撑开其一行的高度，产品希望能将文字在一行内进行显示，因为文字内容不是必要信息，可以进行缩略展示，放在上面可以查看全部内容就行，这样就能使高度控制在一行，element本身自带一个表格属性show-overflow-tooltip，添加这个属性会使其所在列的文字内容进行缩略展示并且鼠标经过可以弹出全部内容。如下图所示：

element table加载附表数据 element table 插槽_css_02


一般来说，问题到这里基本就解决了，但是我做的表格要缩略的文字是内嵌的内容，使用了插槽自定义了表格中的内容，还有一些自定义的功能需要完成，设置show-overflow-tooltip属性后生效了，也一行展示了，但是超出的文字部分并没有显示省略号，经过我的仔细查找发现如果使用slot-scope，在列下面如果又嵌套元素，会导致该show-overflow-tooltip属性不会自动截断文字并展示省略号（…），接下来问题复现：

  1. 正常情况

    代码：
<el-table
      :data="[
        { col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }
      ]"
      border
      stripe
    >
      <el-table-column prop="col1" label="列1" width="70" />
      <el-table-column
        prop="col2"
        label="列2"
        width="70"
        show-overflow-tooltip
      />
    </el-table>
  1. 遇到的问题（问题复现）

    代码：
<el-table
      :data="[
        { col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }
      ]"
      border
      stripe
    >
      <el-table-column prop="col1" label="列1" width="70" />
      <el-table-column prop="col2" label="列2" width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary">
            {{ scope.row.col2 }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>

可以看到上面同样设置了属性，但是在插槽内如果又添加新的元素会导致缩略的文字省略号无法实现，只要在el-table中使用插槽并且添加新的元素，就会导致show-overflow-tooltip属性的效果没有完全实现。

二、解决办法

先附上一张解决后的效果。

element table加载附表数据 element table 插槽_vue_03


解决问题代码：

<el-table
      :data="[
        { col1: 1, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 2, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' },
        { col1: 3, col2: '阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴' }
      ]"
      border
      stripe
    >
      <el-table-column prop="col1" label="列1" width="70" />
      <el-table-column prop="col2" label="列2" width="70" show-overflow-tooltip>
        <template slot-scope="scope">
          <a
            type="primary"
            style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #409eff;"
          >
            {{ scope.row.col2 }}
          </a>
        </template>
      </el-table-column>
    </el-table>

问题解决了，但是还是有些许瑕疵，比如省略号颜色，本人暂时没有找到解决办法，还有就是原本element-ui封装的组件有许多样式都是封装好的不易更改，所以这里直接使用a标签来替代el-link，然后写上文字缩略的css样式来实现效果，这里样式没有指定宽度，是因为可以从父元素也就是el-table-column继承宽度，所以没有设定宽度。而且这个也像一个补丁主要是表格单元格如果内嵌元素不会缩略截断文字并显示省略号，这里我手动补上这个缺陷，其他的效果还是依赖于element官方show-overflow-tooltip这个属性来实现，当然也可以自己实现，但是那样就复杂化了。

总结

以上代码是从项目问题中抽出来的一个demo，实际项目中可能要根据自己的需求去更改一些地方，但是主要解决方法还是一样，在我解决这个问题的地方，是进行了element-ui表格的二次封装，这个缩略属性是作为表头数据传入的，所以在封装的插槽中，我将css部分单独抽出一个类，然后根据传入的缩略属性再去进一步的决定显示样式，并且这个缩略样式要根据自己的需求去完成，总之根据自己想要的显示效果进行修改就行了。

—— 2020.12.16 摸鱼工作记录

今日份励志语句：

优秀的程序员像一名艺术家，每行代码都是反复斟酌后的艺术品。