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-tableclass="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-paginationclass="table-pagination"show-size-changershow-quick-jumperv-if="data.page"v-model:current="data.page.pageIndex"v-model:pageSize="data.page.pageSize":total="data.page.total"@showSizeChange="onShowSizeChange"@change="onShowPageIndexChange"/>
</div>

在这里插入图片描述