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

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

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

效果：

 

 

代码：

  1 <template>
  2   <el-table
  3     :data="tableData"
  4     border
  5     style="width: 100%">
  6     <el-table-column
  7       fixed
  8       prop="date"
  9       label="日期"
 10       width="300">
 11     </el-table-column>
 12     <el-table-column
 13       prop="name"
 14       label="姓名"
 15       width="120">
 16     </el-table-column>
 17     <el-table-column
 18       prop="province"
 19       label="省份"
 20       width="120">
 21     </el-table-column>
 22     <el-table-column
 23       prop="city"
 24       label="市区"
 25       width="120">
 26     </el-table-column>
 27     <el-table-column
 28       prop="address"
 29       label="地址"
 30       width="300"
 31        :show-overflow-tooltip="true" >
 32     </el-table-column>
 33     <el-table-column
 34       prop="zip"
 35       label="邮编"
 36       width="120">
 37     </el-table-column>
 38     <el-table-column
 39       fixed="right"
 40       label="操作"
 41       width="200">
 42       <template slot-scope="scope">
 43         <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
 44         <el-button type="text" size="small">编辑</el-button>
 45         <el-popover placement="right" width="400" trigger="click">
 46             <el-table :data="gridData">
 47             <el-table-column width="150" property="date" label="日期"></el-table-column>
 48             <el-table-column width="100" property="name" label="姓名"></el-table-column>
 49             <el-table-column width="300" property="address" label="地址"></el-table-column>
 50             </el-table>
 51             <el-button @click="handleClick(scope.row)" type="text" size="small" slot="reference">弹窗</el-button>
 52         </el-popover>
 53       </template>
 54       
 55     </el-table-column>
 56   </el-table>
 57 </template>
 58 
 59 <script>
 60   export default {
 61     methods: {
 62       handleClick(row) {
 63         console.log(row);
 64       }
 65     },
 66 
 67     data() {
 68       return {
 69         tableData: [{
 70           date: '2016-05-02',
 71           name: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
 72           province: '上海',
 73           city: '普陀区',
 74           address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
 75           zip: 200333
 76         }, {
 77           date: '2016-05-04',
 78           name: '王小虎',
 79           province: '上海',
 80           city: '普陀区',
 81           address: '上海市普陀区金沙江路 1517 弄',
 82           zip: 200333
 83         }, {
 84           date: '2016-05-01',
 85           name: '王小虎',
 86           province: '上海',
 87           city: '普陀区',
 88           address: '上海市普陀区金沙江路 1519 弄',
 89           zip: 200333
 90         }, {
 91           date: '2016-05-03',
 92           name: '王小虎',
 93           province: '上海',
 94           city: '普陀区',
 95           address: '上海市普陀区金沙江路 1516 弄',
 96           zip: 200333
 97         }]
 98       }
 99     }
100   }
101 </script>
View Code

 

posted @ 2020-09-23 16:21  大师的修炼之路  阅读(10201)  评论(0)  编辑  收藏  举报