表头数据过多,需要添加横向滚动条
解决方法:每个column 中添加min-width属性
html
<!-- 表单表格 -->
<el-table
:data="H5Store.H5list"
@selection-change="selectTbhandle"
style="width: 100%"
>
<el-table-column type="selection" min-width="60"> </el-table-column>
<el-table-column label="模板名称" min-width="180">
<template #default="{ row }">
<div class="flex">
<img
style="width: 100px; height: 60px"
:src="row.templateCover"
alt=""
/>
<p style="font-size: 12px; margin-left: 5px">{{ row.name }}</p>
</div>
</template>
</el-table-column>
<el-table-column prop="templateType" label="模板类型" min-width="100">
</el-table-column>
<el-table-column prop="industryTypeList" label="适用行业分类" min-width="150">
</el-table-column>
<el-table-column prop="applicableHolidays" label="适用节日" min-width="120">
</el-table-column>
<el-table-column prop="applicablePurposeList" label="行业用途" min-width="120">
</el-table-column>
<el-table-column prop="isShelves" label="是否上架" min-width="100">
<template #default="{ row }">
<span>{{ row.isShelves ? '已上架' : '已下架' }}</span>
</template>
</el-table-column>
<el-table-column prop="createdTime" label="创建时间" min-width="150">
</el-table-column>
<el-table-column label="操作" min-width="200">
<template #default="{ row }">
<div class="flex justify-start">
<el-button type="link" @click="Edit(row.id)" size="small"
>编辑</el-button
>
<el-button
v-if="!row.isShelves"
@click="upisShelves(row)"
type="link"
size="small"
>上架</el-button
>
<el-button
v-else
@click="downisShelves(row)"
type="link"
size="small"
>下架</el-button
>
<el-button @click="Del(row.id)" type="link" size="small"
>删除</el-button
>
</div>
</template>
</el-table-column>
</el-table>