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之后的效果
相关推荐
奋斗猿3 分钟前
中级前端避坑指南:图片优化没那么简单,这5招让页面快到飞起
前端
布茹 ei ai9 分钟前
地表沉降监测分析系统(vue3前端+python后端+fastapi+网页部署)(开源分享)
前端·python·fastapi
不一样的少年_10 分钟前
WebTab等插件出事后:不到100行代码,带你做一个干净透明的新标签页
前端·javascript·浏览器
幸运小圣10 分钟前
关于Vue 3 <script setup> defineXXX API 总结
前端·javascript·vue.js
500佰13 分钟前
AI 财务案例 普通财务人的AI in ALL
前端·人工智能
军军36014 分钟前
动态星空粒子效果
前端
n***i9516 分钟前
重新定义前端运行时:从浏览器脚本到分布式应用层的架构进化
前端·架构
AAA阿giao17 分钟前
从零开始:用 Vue 3 + Vite 打造一个支持流式输出的 AI 聊天界面
前端·javascript·vue.js
玉宇夕落18 分钟前
Vue 3 实现 LLM 流式输出:从零搭建一个简易 Chat 应用
前端·vue.js
开源之眼18 分钟前
github star都很多的 React Native 和 React 有什么区别?一文教你快速分清
前端