我上一篇发布如何优化官网写的table表格的写法,但是他的列宽不能自适应,于是我觉得官网会增加某个属性控制列宽
我试了 直接加 fit 或者 :fit="true"都不好使,我看到网上有些人去动态计算内容的宽度,但是效果不好,有时还会过宽!
于是我找到一个基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能
https://github.com/legendJaden/AFTableColumn
<af-table-column
v-for="{ prop, label } in colConfigs"
:key="prop"
:prop="prop"
:label="label" >
</af-table-column>
<el-table-column
fixed="right"
label="操作" width="150">
<template slot-scope="scope">
<el-button
size="mini"
@click="dialogFormVisible = true" >评价</el-button>
<!--查看评价-->
<el-dialog title="评价详情" :visible.sync="dialogFormVisible">
<div>
<span class="comment" >评分</span>
</div>
</el-dialog>
<el-button
size="mini"
type="danger"
@click="dialogTableVisible = true" >打印</el-button>
<!--打印服务协议-->
<el-dialog title="打印详情" :visible.sync="dialogTableVisible">
<div>打印</div>
</el-dialog>
</template>
</el-table-column>
实现效果图:
窗口缩小效果图: