vue+element-ui el-table表格(含表头)内容溢出省略,鼠标悬浮提示
第一种:
参考:https://my.oschina.net/u/3455362/blog/4674804
<template> <div class="test"> <el-table :data="gridData" border stripe style="width: 100%"> <template v-for="item in gridDataHeader"> <el-table-column :prop="item.key" :key="item.key" :label="item.label" :align="item.align" show-overflow-tooltip> <template slot-scope="scope" slot="header"> <div @mouseover="onMouseOver('refName' + scope.$index)"> <el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top"> <div class="long_title"> <span :ref="'refName' + scope.$index">{{item.label}}</span> </div> </el-tooltip> </div> </template> </el-table-column> </template> </el-table> </div> </template> <script> export default { data() { return { gridDataHeader: [ {key:'date',label:'日期afdsasfasdfasfdasasfasfasdfasdfasdfadsfdfasdf',width:'100',aling:'center'}, {key:'name',label:'姓名',width:'200',aling:'center'}, {key:'address',label:'地址',width:'100',aling:'center'} ], gridData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄afsafasfergtujyjhgngfhddfghdgfhgfdh", }, ], isShowTooltip: false, }; }, methods: { onMouseOver(refName) { let parentWidth = this.$refs[refName][0].parentNode.offsetWidth; let contentWidth = this.$refs[refName][0].offsetWidth; // 判断是否开启tooltip功能 if (contentWidth > parentWidth) { this.isShowTooltip = false; } else { this.isShowTooltip = true; } }, }, }; </script> <style> .long_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style>
第二种:el-table中render-header
<template> <div class="TableHeaderTest"> <el-table size="small" border v-loading="loading" :data="tableData" style="width: 100%" > <el-table-column prop="city_name" label="城市"> </el-table-column> <el-table-column prop="maxprice" :render-header="renderHeader"> <template slot-scope="scope"> <span ><span class="skucost-pruice">¥</span ><span class="skucost-pruice">{{ scope.row.maxprice }}</span></span > </template> </el-table-column> <el-table-column prop="company_name" label="机构名称"> </el-table-column> <el-table-column prop="area_name" label="区域"> </el-table-column> <el-table-column prop="price" label="价格"> <template slot-scope="scope"> <span ><span class="skucost-pruice">¥</span ><span class="skucost-pruice">{{ scope.row.price }}</span></span > </template> </el-table-column> </el-table> </div> </template> <script> export default { name: "TableHeaderTest", data() { return { loading: false, tableData: [ { city_name: "fafa", maxprice: "123", company_name: "sfdgsfdgfsd", area_name: "hgfhdgf", price: "123", }, ], }; }, methods: { //自定义表头 renderHeader(h) { return h("span", {}, [ // h("span",{class: "headerTest",},"价格"), h( "el-popover", { props: { placement: "top", width: "200", trigger: "hover", content: "城市价格为该城市所有加盟商价格的最高价", }, }, // [h("", { slot: "reference", class: "el-icon-question" }, "")] [h("span",{slot: "reference",class: "headerTest",},"价格就分手;收款方使肌肤的哈萨克复读机啊阿凡达阿斯顿发的说法放大石头人gas发送到发")] ), ]); }, }, }; </script> <style> .headerTest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style>
注:el-tooltip写法
renderHeader(h,{column}){
console.log(column);
if(column.label){//表头名称
reutrn (
<el-tooltip errect="dark" content={column.label} placement="top">//鼠标悬浮提示
<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{column.label}</span>//表头名称
</el-tooltip>
)
}
}