问题:刚开始想要实现自适应设置了 width:10%;min-width:50; 这样结果表格直接乱了
解决:给min-width设定固定值,这样当浏览器窗口比较小的时候,显示滚动条,当比较大的时候,表格也会自适应占满。
参考
<el-table
v-loading="loading"
:data="testresultList"
:header-cell-style="{ textAlign: 'left' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="left" />
<el-table-column
label="被抽食品所属企业"
min-width="180"
align="left"
prop="entName"
fixed
:show-overflow-tooltip="true"
/>
<el-table-column
label="被抽检单位"
min-width="180"
align="left"
prop="sampledUnit"
:show-overflow-tooltip="true"
/>
<el-table-column
label="被抽食品"
min-width="160"
align="left"
prop="sampleName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="检测机构"
min-width="160"
align="left"
prop="testOrg"
:show-overflow-tooltip="true"
/>
<el-table-column
label="检测日期"
min-width="160"
align="left"
prop="testDate"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.testDate, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column
label="检测结果"
min-width="100"
align="left"
prop="testResult"
:show-overflow-tooltip="true"
/>
<el-table-column
label="检测结果状态"
min-width="160"
align="left"
prop="testResultStatus"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<dict-tag
:options="dict.type.test_result"
:value="scope.row.testResultStatus"
/>
</template>
</el-table-column>
<el-table-column
label="备注"
min-width="160"
align="left"
prop="remark"
:show-overflow-tooltip="true"
/>
<el-table-column
label="操作"
min-width="100"
align="left"
class-name="small-padding fixed-width"
fixed="right"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['sample:testresult:edit']"
>查看</el-button
>
</template>
</el-table-column>
</el-table>