Element el-table 和 el-popover弹出框 对单元格数据过长重新渲染

<template>
<!-- list位script中定义的数据源 -->
<el-table :data="list"  style="width: 100%;" row-key="id" stripe border
                  @selection-change="selectionRowsChange" class="tableLimit">
            <el-table-column type="selection" width="35"></el-table-column>
            <el-table-column label="标签1" prop="column1">
                <template slot-scope="scope">
                    <el-popover
                            placement="right"
                            title="标签1"
                            width="300"
                            trigger="hover"
                            :content="scope.row.column1">
                            <!--此处div是table表格中要显示的文字-->
                        <div slot="reference">{{scope.row.column1}}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="标签2"  prop="column2"></el-table-column>
            <el-table-column label="标签3" prop="column3">
                <template slot-scope="scope">
                    <el-popover
                            placement="left"
                            title="标签3"
                            width="300"
                            trigger="hover"><!--scope.row.options-->
						<!--因为要显示的太多,所以定义一个函数重新生成数据格式   v-html可以解析拼接的HTML字符,如果直接写在两个div中,拼接的HTML字符无法解析-->
                        <div v-html="getContent(scope.row.column3)"></div>
                        <div slot="reference">{{scope.row.column3}}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="标签3" prop="column4" width="150" ></el-table-column>
</template>            

<script>
	export default {
        components:{ Pagination },
        data(){
            return {
                list:[]
            }
        },
        mounted(){
            this.loadData()
        },
        methods:{
            getContent(val){
            //数据是一个长字符串,每一段后边都有";",所以用这个切割,然后再拼接为每个div一块,以此显示为每个数据为一个单行
                let arr = val.split(';')
                let str = '';
                for(let i in arr){
                    str += '<div>' + arr[i] + '</div>'
                }
                return str;
            },
            //异步加载
            async loadData(){
            	//获取数据源
                let res = await getData()
                //接收源数据返回
                this.list = res.data.data
            },
        }
    }
</script

/* 数据太多,让数据超出不换行,并以....进行显示 */
<style >
    .tableLimit tr td .cell{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>