el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;

el-table文字默认情况下若内容过多会折行显示若需要单行显示可以给el-table-column使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
《el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;》

给el-table-column添加show-overflow-tooltip
《el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;》

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" show-overflow-tooltip label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default { 
  data () { 
    return { 
      tableData: [{ 
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, { 
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, { 
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1519 弄'
      }, { 
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
    原文作者:i_am_a_div_日积月累_
    原文地址: https://blog.csdn.net/i_am_a_div/article/details/121770751
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞