Element UI 表格 show-overflow-tooltip 设置宽度以及内容换行

前言

用vue+element ui框架，用到table表格，如果每列显示的内容过长则可以使用该属性，即 :show-overflow-tooltip="true"，该属性可以让内容在一行显示，如果显示不下时，显示...,并且鼠标划过时显示全部文字。通常会出现这样的效果：

一、设置 show-overflow-tooltip宽度

样式代码如下：

注意：可以在全局添加这样全部生效，如果不想加在全局的话，可以单独加在页面当中，但是切记修改elementui自带样式的话，不能在<style scoped></style>中修改，因为不会生效。

.el-tooltip__popper {

  max-width: 800px;

}

二、使 show-overflow-tooltip内容以换行符换行

具体思路：

• 使用slot自定义el-tooltip内容
• v-html指令转义
• 删除 show-overflow-tooltip属性，否则页面出现两个近乎重叠的tip
• 将表格过长的文字使用Css省略显示

<el-table v-loading="loading" :header-cell-style="tableHeaderColor" class="anyTable" height="500" stripe :data="tableList" style="width: 100%;margin-top:10px;">
	<el-table-column prop="index" width="50" label="序号" align="left"></el-table-column>
	<!-- show-overflow-tooltip -->
	<el-table-column prop="alarmDescription" label="告警描述" align="left" >
		<template slot-scope="scope">
			<el-tooltip class="item" effect="dark" placement="top">
			    <!-- // {
   
   {}}会将数据解释为普通文本，而非 HTML 代码。 -->
			    <div v-html="scope.row.alarmDescription" slot="content"></div>
			    <div class="oneLine">{
   
   {scope.row.alarmDescription}}</div>
		    </el-tooltip>
		</template>
	</el-table-column>
</el-table>

// ...
<script>
export default {
    data () {
        return {
          loading:false,
          tableList:[],
        }
    },
    methods: {
       init(){
            // 获取表格数据接口，在成功的状态里进行赋值
            this.tableList = res.value    //假设res.value为返回结果
       }
    }
}
</script>
// 样式
<style scoped>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>