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

发布于:2025-07-12 ⋅ 阅读:(42) ⋅ 点赞:(0)

源码

<el-table
        class="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>

效果

在这里插入图片描述

  • 滚动条滑动后分类名称会盖住商家名称

说明

1、 table-layout=“auto”
2、 el-table-column 要设置列宽 或者就设置min-width就不会出现这个问题了


网站公告

今日签到

点亮在社区的每一天
去签到