element-ui中table列内容过长，省略号+hover显示

目的：实现element-ui中table中列内容超长时，可以在列表只显示部分内容，鼠标上去hover显示全部内容。

实现：只用在column中加 :show-overflow-tooltip=”true” > //el-table字体长度过长，浮动显示

效果：

代码：

<template>
<el-table
:data=”tableData”
border
style=”width: 100%”>
<el-table-column
fixed
prop=”date”
label=”日期”
width=”300″>
</el-table-column>
<el-table-column
prop=”name”
label=”姓名”
width=”120″>
</el-table-column>
<el-table-column
prop=”province”
label=”省份”
width=”120″>
</el-table-column>
<el-table-column
prop=”city”
label=”市区”
width=”120″>
</el-table-column>
<el-table-column
prop=”address”
label=”地址”
width=”300″
:show-overflow-tooltip=”true” >
</el-table-column>
<el-table-column
prop=”zip”
label=”邮编”
width=”120″>
</el-table-column>
<el-table-column
fixed=”right”
label=”操作”
width=”200″>
<template slot-scope=”scope”>
<el-button @click=”handleClick(scope.row)” type=”text” size=”small”>查看</el-button>
<el-button type=”text” size=”small”>编辑</el-button>
<el-popover placement=”right” width=”400″ trigger=”click”>
<el-table :data=”gridData”>
<el-table-column width=”150″ property=”date” label=”日期”></el-table-column>
<el-table-column width=”100″ property=”name” label=”姓名”></el-table-column>
<el-table-column width=”300″ property=”address” label=”地址”></el-table-column>
</el-table>
<el-button @click=”handleClick(scope.row)” type=”text” size=”small” slot=”reference”>弹窗</el-button>
</el-popover>
</template>

</el-table-column>
</el-table>
</template>

<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},

data() {
return {
tableData: [{
date: ‘2016-05-02’,
name: ‘王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎’,
province: ‘上海’,
city: ‘普陀区’,
address: ‘上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄’,
zip: 200333
}, {
date: ‘2016-05-04’,
name: ‘王小虎’,
province: ‘上海’,
city: ‘普陀区’,
address: ‘上海市普陀区金沙江路 1517 弄’,
zip: 200333
}, {
date: ‘2016-05-01’,
name: ‘王小虎’,
province: ‘上海’,
city: ‘普陀区’,
address: ‘上海市普陀区金沙江路 1519 弄’,
zip: 200333
}, {
date: ‘2016-05-03’,
name: ‘王小虎’,
province: ‘上海’,
city: ‘普陀区’,
address: ‘上海市普陀区金沙江路 1516 弄’,
zip: 200333
}]
}
}
}
</script>

转自：https://www.cnblogs.com/hellomaster/p/13719164.html