默认显示格式如下:
<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>
实现效果图: