Element UI table表格实现列宽随内容自适应

13,342 阅读1分钟
默认显示格式如下:
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="age" label="姓名"> </el-table-column>
    <el-table-column prop="phone" label="姓名"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>
实现效果图:

溢出隐藏,鼠标经过再显示出来,添加 show-overflow-tooltip 属性给需要的列
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="age" label="姓名"> </el-table-column>
    <el-table-column prop="phone" label="姓名"> </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
  </el-table>
</template>
实现效果图:

基于 element-ui 组件库的 af-table-column 组件, 支持自适应列宽功能, 使用方法如下:

安装

npm install af-table-column

引入

// main.js (需要先引入 Vue 和 Element-UI 依赖库, 并在 <el-table></el-table> 组件下使用该组件)
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)
// demo.vue
<template>
  <el-table :data="tableData" style="width: 100%">
    <af-table-column prop="date" label="日期"> </af-table-column>
    <af-table-column prop="name" label="姓名"> </af-table-column>
    <af-table-column prop="age" label="姓名"> </af-table-column>
    <af-table-column prop="phone" label="姓名"> </af-table-column>
    <af-table-column prop="address" label="地址"> </af-table-column>
  </el-table>
</template>
实现效果图: