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之后的效果
相关推荐
Setsuna_F_Seiei3 小时前
前端转型 Agent 开发 06 之 Agent Memory 记忆系统(让 Agent 更智能,更懂你)
前端·agent·ai编程
志尊宝4 小时前
Vue3 零基础每日笔记(073):keep-alive 页面缓存实战——列表页返回不丢状态
vue.js·笔记·缓存·#vue #前端 #前端开发·#javascript·#vue.js
zhangzeyuaaa4 小时前
Ruby 多线程、GVL(GIL)与 Mutex 完全指南
开发语言·前端·ruby
默_笙4 小时前
🌊 向量库和 ES 都查不出"关系",我只好给奶茶建了一张人脉网
前端·javascript
优选资讯5 小时前
标签打印软件怎么对接 Excel 数据
前端·excel
一个风轻云淡5 小时前
GCC 和 GDB命令简单解读
java·linux·前端
u0111026756 小时前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说7 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa7 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端
deli0077 小时前
DLA 枝晶生长实测:5000 个粒子集体停摆之后,分形维数收敛到 1.70
前端