The default display format is as follows:
<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>
The overflow is hidden, the mouse is over and then displayed, add the show-overflow-tooltip attribute to the required column
<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>
Based on the el-table-column component of the element-ui component library, it supports the adaptive column width function
Install
npm install af-table-column
introduce
// 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>
在工作中遇到这个需求,表格需要完整的展示内容,如果不设置宽度,表格所有的列会平均分配,如果设置了宽度又太局限了在此借鉴以下作者的文章记录一下,自己亲测是有效的,感谢(前端代码仔)的输出,也期待如果大家在后面的实现中有更好的方式或者本文有不完善的地方,欢迎大家来信指出
When the column of element ui's table component has no width set, all the columns are evenly distributed to the total width of the table. When the width is set, the setting prevails. When the minimum width is set, it will change according to the actual situation. A line break occurs.
Another implementation, but I have not verified it myself, I can study it when I have time