默认显示格式如下：
<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 组件库的 el-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>
在工作中遇到这个需求,表格需要完整的展示内容,如果不设置宽度,表格所有的列会平均分配,如果设置了宽度又太局限了在此借鉴以下作者的文章记录一下,自己亲测是有效的,感谢(前端代码仔)的输出,也期待如果大家在后面的实现中有更好的方式或者本文有不完善的地方,欢迎大家来信指出
element ui 的表格组件的列在没有设置宽度的时候所有列是平均分配表格的总宽度的,在设置了宽度的时候已以设置的为准,在设置了最小宽度的时候按照实际情况变化,会出现换行的情况.
