Ant Design Vue table固定列失效问题解决

问题描述:项目中封装好的公共table组件,基于Ant Design Vue table封装;使用中,用到了列固定,但是没生效,找了好久的原因。。。最后是因为外层容器标签导致;

解决方法:如果a-table组件外层是a-row,那么它们两者之间不能有div或其他的标签,只能是a-row --> a-table;否则将会出现列无法固定的问题;只需要将a-row标签更换为普通div标签即可解决!下面看代码!

原来的代码结构和效果
复制代码
<!-- index.vue -->
<a-row class="moduleTable">
  <div class="table-top-btn">
    <a-button type="primary">新增用户</a-button>
  </div>
  <nsGrid 
    :table-columns="data.tableColumns" 
    :table-list="data.tableList" 
    :table-scroll="data.tableScroll" 
    :key="data.tableListCount" 
    :table-page="data.tablePage" 
  ></nsGrid>
</a-row>
<!-- nsGrid组件vue 这里因为a-table的外层有div,
	所以我在index.vue引用的时候就成了a-row-->div-->a-table
	这样导致固定列失效 -->
<div class="table-index">
    <a-table
        class="ant-table-striped"
        :columns="data.columns"
        :pagination="false"
        size="middle"
        :data-source="data.list"
        :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : null)"
        :scroll="data.scroll"
        :locale="data.tablenodata" 
        :childrenColumnName="data.childrenColumnName"
        :defaultExpandAllRows="data.defaultExpandAllRows"
        rowKey="menuId"
    >   
        <!-- bodyCell 个性化单元格	v-slot:bodyCell="{text, record, index, column}" -->
        <!-- 当前单元格的值:{{ text }} ~ 当前行数据:{{ record }} ~ 当前行的索引:{{index}} ~ 当前列相关属性:{{column}} -->
        <template #bodyCell="{text, record, index, column}">
            <!-- 链接列 -->
            <template v-if="column.type === 'link'">
                <span style="color: blue;cursor: pointer;" @click="tableLinkEvent(text, record, index, column)">{{ record[column.dataIndex] }}</span>
            </template>
            <!-- 操作列 -->
            <template class="oper-col" v-else-if="column.type === 'operation'">
                <div style="display: flex; justify-content: center;">
                    <a-tooltip 
                        v-for="(oper, index) in column.operationArr" 
                        placement="topLeft"
                    >
                        <!-- 是否显示tips提示 -->
                        <template #title v-if="oper.tips">
                            <span v-if="oper.tipCustomText">{{ oper.tipCustomText }}</span>
                            <span v-else>{{ oper.tipCustomEvent(record) }}</span>
                        </template>
                        <!-- 显示操作图标或文字 -->
                        <a-button 
                            @click="tableOperEvent(oper, record, index, column)" 
                            type="link"
                            style="padding-left: 8px;padding-right: 8px;"
                            :disabled="disabledEvent(oper, record, index, column)"
                            v-if="vIfEvent(oper, record, index, column)"
                        >
                            <component v-if="oper.icon" :is="data.componentObj[oper.icon]"></component>
                            <span v-else>{{ oper.domName }}</span>
                        </a-button>
                    </a-tooltip>
                </div>
            </template>
            <!-- 图像列 -->
            <template v-else-if="column.type === 'image'">
                <a-space :size="16" wrap>
                    <a-avatar :src="data.outsideHttpUrl + record[column.dataIndex]" />
                </a-space>
            </template>
            <!-- 需要自定义format的列 -->
            <template class="oper-col" v-else-if="column.format">
                <span>{{ column.format(text, record) }}</span>
            </template>
            <!-- 需要渲染html的列 -->
            <template class="oper-col" v-else-if="column.isHtml">
                <span v-html="text"></span>
            </template>
            <!-- 普通列 -->
            <template v-else>
                <span>{{ text }}</span>
            </template>
        </template>
    </a-table>
    <a-pagination
        class="table-pagination"
        show-size-changer
        show-quick-jumper
        v-if="data.page"
        v-model:current="data.page.pageIndex"
        v-model:pageSize="data.page.pageSize"
        :total="data.page.total"
        @showSizeChange="onShowSizeChange"
        @change="onShowPageIndexChange"
    />
</div>
将a-row换成div之后的效果
相关推荐
anyup_前端梦工厂14 分钟前
前端单元测试实战:如何开始?
前端·单元测试
拖孩18 分钟前
【Nova UI】十、打造组件库第一个组件-图标组件(下):从.svg 到 SVG Vue 组件的高效蜕变✨
前端·javascript·vue.js
独立开阀者_FwtCoder26 分钟前
一张图讲清楚:Manus的技术架构
前端·javascript·面试
小鱼人爱编程27 分钟前
AI🔥助我!三分钟实现丐版前后端注册登录需求
前端·后端·deepseek
独立开阀者_FwtCoder29 分钟前
【CSS】2327- CSS view():JavaScript 滚动动画的终结
前端·javascript·github
盛夏绽放30 分钟前
uni-app 状态管理深度解析:Vuex 与全局方案实战指南
前端·javascript·uni-app
Mr_兔子先生31 分钟前
2025盛夏版:Next.js15+Antd5开发部署SSR网站速通教程
前端·react.js·next.js
Sherlock Ma38 分钟前
CSS零基础入门笔记:狂神版
前端·css·程序人生·跳槽·css3·学习方法·改行学it
浩哲Zhe1 小时前
Java Web 之 Tomcat 100问
java·前端·tomcat
利刃之灵1 小时前
02-HTML结构
前端·html