Element UI 表格 show-overflow-tooltip 内容换行

Element UI 表格 show-overflow-tooltip 内容换行

前

// {{}}会将数据解释为普通文本，而非 HTML 代码。,使用v-html指令转义

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

<el-table-column prop="desc" label="tooltip换行描述" width="140">
    <template slot-scope="scope">
		<el-tooltip class="item" effect="dark" placement="top">
            // {{}}会将数据解释为普通文本，而非 HTML 代码。
    		<div v-html="ToBreak(scope.row.desc)" slot="content"></div>
    		<div class="oneLine">{{scope.row.desc}}</div>
        </el-tooltip>
    </template>
</el-table-column>
// ...
<script>
export default {
    data () {
        return {
            desc: '单果重≥14g，＜14g且≥10g的不达标率＜15%，单果重＜10g的不允许。\n单串重≥500g，＜500g且≥400g的不达标率＜10%，＜400g的不允许'
        }
    },
    methods: {
        // 将 \n 换为 <br/>标签
        ToBreak (val) {
          return val.replace('\n', '<br />')
        }
    }
}
</script>
// 样式
<style lang='scss'>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

后