一般有三种情况
1.el-table-column不设置width与minwidth,每一列自适应,宽度一致
2.el-table-column设置width=30%,无效。
el-table 组件会被 vue 解析成 html, width 设置百分比的值直接被解析去掉百分号变成 px 了
3.el-table-column设置min-width="30"或者30%,每一列都设置min-width才能实现每一列的百分比配置
<el-table
:data="tableList"
v-loading="loading"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
highlight-current-row
>
<el-table-column label="序号" type="index" min-width="5%" align="center"></el-table-column>
<el-table-column prop="xxxx" label="xxxx" align="left" min-width="25%"></el-table-column>
<el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
<el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="20%"></el-table-column>
<el-table-column label="xxxx" align="center" :formatter="formatTd" min-width="12%">
<template slot-scope="scope">
<el-link
type="primary"
v-if="scope.row.xxxx"
@click="xxxx(scope.row)"
>{{scope.row.xxxx}}</el-link>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
<el-table-column prop="xxxx" label="xxxx" align="center" :formatter="formatTd" min-width="12%"></el-table-column>
<!-- 表格数据为空 -->
<div slot="empty" v-show="isShow">
<emptyTable emptyText="暂无相关数据"></emptyTable>
</div>
</el-table>