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

<template>

<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 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">
						
                        <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 += '
' + arr[i] + '
'
} return str; }, //异步加载 async loadData(){ //获取数据源 let res = await getData() //接收源数据返回 this.list = res.data.data }, } } </script
/* 数据太多,让数据超出不换行,并以....进行显示 */

你可能感兴趣的:(Vue-element)