vue 设置表格当内容过长时自动添加省略号，点击时显示提示文本

桃扇骨 2023-06-14 15:58 17阅读 0赞

效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

方法一：

vue使用element-ui中的table布局，其实只要添加一个自带属性方法就可以：

![20191120105741434.png][]

代码：

<el-table-column label="家长建议"  :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{
       { scope.row.suggestion }}</span>
              </template>
            </el-table-column>

方法二：

可以用vue过滤器过滤返回的数据，这里设置一个全局过滤器

filters.js

填写过滤方法并导出

//过滤数据
    function forDataOne(value) {
      let Datas = value;
    //所返回数据length为7是添加"..."
      let Datas_msg = Datas.substr(0, 7) + "...";
      if (Datas.length <= 8) {
        return Datas;
      } else {
        return Datas_msg;
      }
    }
    
    export {
      forDataOne
    
    }

main.js

在main.js全局导入

import * as filters from './assets/JS/filters'
    //遍历所有导出的过滤器并添加到全局过滤器
    Object.keys(filters).forEach((key) => {
      Vue.filter(key, filters[key]);
    })

test.vue

在需要使用过滤器的页面直接进入

<el-col :span="5" class="col_row1">
          <a class="grid-content">{
       {item.suggestion | forDataOne}}</a>
     </el-col>

方法三：

用css实现文件禁止折行，超过部分用省略号隐藏

<el-table-column label="内容"   >
              <template slot-scope="scope" >
                <span class="table-content" >{
       { scope.row.content }}</span>
              </template>
            </el-table-column>

.table-content{
      white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
     //强制不换行，超出部分隐藏且以省略号形式出现
    }

效果如下：

![20200428155947327.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120105605589.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20191120105741434.png]: https://img-blog.csdnimg.cn/20191120105741434.png
[20200428155947327.png]: https://img-blog.csdnimg.cn/20200428155947327.png