element表格通过tooltip模拟show-overflow-tooltip并实现弹框位置自定义

1,433 阅读1分钟
			<el-table-column
                prop="xxxx"
                label="xxxx"
                width="120">
                <template slot-scope="scope">
                    <el-tooltip 
                        placement="right" 
                        width="250" 
                        trigger="hover"
                        enterable>
                        <div slot="content">
                            {{ scope.row.xxxx }}
                        </div>
                        <span class="hideOverflow">
                            {{ scope.row.xxxx }}
                        </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            
            
            <style>
            .hideOverflow{
    			display: inline-block;
    			width: 100%;
    			overflow: hidden;
    			text-overflow: ellipsis;
    			white-space: nowrap;
				}
            </style>