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

效果图如下：

方法一：

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

 

代码：

  <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;
 //强制不换行，超出部分隐藏且以省略号形式出现
}

效果如下：