当前位置：首页 > news >正文

vue3 element plus table 使用固定列，滑动滚动会错位、固定列层级异常、滑动后固定列的内容看不到了

news 2025/7/14 15:08:22

源码

<el-tableclass="custom-table"row-key="merchant_category_id"v-loading="loading"table-layout="fixed":data="tableData"
tooltip-effect="light"empty-text="暂无数据"@select="selectTable"@select-all="selectAllTable":cell-style="{ textAlign: 'center' }":header-cell-style="{textAlign: 'center'}"ref="multipleTableRef"scrollbar-always-on><!-- <el-table-column fixed type="selection" style="z-index: 9;"  width="55" /> --><el-table-column fixed label="商家名称"class-name="zindex2" property="mer_name" min-width="240"><!-- <template #default="scope">{{ scope.row.category_name }}</template> --></el-table-column><el-table-column property="category_name" label="分类名称" width="120" /><el-table-column property="real_name" label="法人名称" width="120" /><el-table-column property="mer_phone" label="法人电话" width="120" /><el-table-column property="licenceNo" label="营业执照号" width="120" /><el-table-column property="mer_phone" label="服务有效期" width="120" ><template #default="scope">{{scope.row.end_time=="0"?"永久有效":scope.row.end_time}}</template></el-table-column><el-table-column label="营业执照照片" property="mer_name" width="120"><template #default="scope"><el-image preview-teleported style="width: 60px; height: 60px" :preview-src-list="[scope.row.licenceUrl]" :src="scope.row.licenceUrl"fit="cover" /></template></el-table-column><el-table-column property="create_time" label="创建时间" min-width="180" /><el-table-column property="licenceNo" label="店铺状态" width="120" ><template #default="scope"><el-tag  :type="scope.row.mer_state==1?'success':'danger'">{{scope.row.mer_state==1?"开启":"关闭"}}</el-tag></template></el-table-column><el-table-column property="margin" label="保证金" width="200" /><el-table-column property="address" label="操作" fixed="right" width="280"><template #default="scope"><div class="cz_text"><span class="bj" >登录店铺</span><span class="bj" @click="updataPwd(scope.row)">修改密码</span><span class="bj" @click="updataPwd(scope.row)">营业执照</span><span class="bj" @click="editDetail(scope.row)">编辑</span><!-- <span class="look">查看</span> --></div></template></el-table-column></el-table>