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

news2024/11/18 22:36:45

问题描述:项目中封装好的公共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之后的效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1570870.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows系统安装OpenSSH结合VS Code远程ssh连接Ubuntu【内网穿透】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-AwzyR2lkHKjD9HYl {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

【吊打面试官系列】Redis篇 - Redis单进程单线程好处?

大家好&#xff0c;我是锋哥。今天分享关于 【Redis单进程单线程好处&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; Redis单进程单线程好处&#xff1f; 代码更清晰&#xff0c;处理逻辑更简单 不用去考虑各种锁的问题&#xff0c;不存在加锁释放锁操作&…

使用简单MLP实现0-9数字识别,数据集为MNIST

简介 需求&#xff1a; 基于pytorch实现简单MLP&#xff0c;完成数字识别&#xff0c;采用MNIST手写数字作为数据集&#xff0c;MNIST&#xff1a;有6万张训练图片&#xff0c;1万张测试图片训练结束后&#xff0c;随机取3张测试图片&#xff0c;展示模型的预测结果和真实图片…

策略模式图

策略模式 小小的图解 主要的三个角色 Strategy—抽象策略角色ConcreateStrategy—具体策略角色Context—上下文角色 封装了对具体策略的调用可以使用set的依赖注入也可以使用构造方法 核心是上下文角色 只要调用上下文角色就行&#xff0c;实现解耦 策略 工厂 将上下文角…

【java探索之旅】逻辑控制掌握 顺序结构 分支语句

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、逻辑控制的概念二、顺序结构三、分支结构3.1 if语句3.2 if习题巩固3.3 细节注意项…

TR3 - Transformer算法详解

目录 文本输入处理词向量位置向量 编码器 EncoderSelf-Attention多头注意力机制残差连接 解码器 Decoder线性层与Softmax损失函数总结与心得体会 这周来看一下Transformer是怎么将文本转换成向量&#xff0c;然后又输入到模型处理并得到最终的输出的。 文本输入处理 词向量 …

递归算法解读

递归&#xff08;Recursion&#xff09;是计算机科学中的一个重要概念&#xff0c;它指的是一个函数&#xff08;或过程&#xff09;在其定义中直接或间接地调用自身。递归函数通过把问题分解为更小的相似子问题来解决原问题&#xff0c;这些更小的子问题也使用相同的解决方案&…

2024-04-05 问AI: 介绍一下深度学习中的Leaky ReLU函数

文心一言 Leaky ReLU&#xff08;Leaky Rectified Linear Unit&#xff09;函数是深度学习领域中的一种激活函数&#xff0c;主要用于解决ReLU&#xff08;Rectified Linear Unit&#xff09;函数在负值区域为零的问题。ReLU函数在输入为正时保持原样&#xff0c;而在输入为负…

Navicat工具使用

Navicat的本质&#xff1a; 在创立连接时提前拥有了数据库用户名和密码 双击数据库时&#xff0c;相当于建立了一个链接关系 点击运行时&#xff0c;远程执行命令&#xff0c;就像在xshell上操作Linux服务器一样&#xff0c;将图像化操作转换成SQL语句去后台执行 一、打开Navi…

Python学习: 错误和异常

Python 语法错误 解析错误(Parsing Error)通常指的是程序无法正确地解析(识别、分析)所给定的代码,通常是由于代码中存在语法错误或者其他无法理解的结构导致的。这可能是由于缺少括号、缩进错误、未关闭的引号或其他括号等问题造成的。 语法错误(Syntax Error)是指程序…

CSS设置网页颜色

目录 前言&#xff1a; 1.颜色名字&#xff1a; 2.十六进制码&#xff1a; 3.RGB&#xff1a; 4.RGBA&#xff1a; 5.HSL&#xff1a; 1.hue&#xff1a; 2.saturation&#xff1a; 3.lightness&#xff1a; 6.HSLA&#xff1a; 前言&#xff1a; 我们在电脑显示器&…

【NLP练习】中文文本分类-Pytorch实现

中文文本分类-Pytorch实现 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、准备工作 1. 任务说明 本次使用Pytorch实现中文文本分类。主要代码与文本分类代码基本一致&#xff0c;不同的是本次任务使用…

[中级]软考_软件设计_计算机组成与体系结构_07_存储系统

存储系统 层次划存储概念图局促性原理分类存储器位置存取方式按内容存储按地址存储 工作方式拓展 往年真题 高速缓存(cache)概念案例解析&#xff1a;求取平均时间 Cache与主存的地址映射映像往年真题 主存编制计算编址大小的求取编址与计算存储单元编址内容总容量求取例题解析…

c# wpf template itemtemplate+dataGrid

1.概要 2.代码 <Window x:Class"WpfApp2.Window8"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend…

[C#]OpenCvSharp使用帧差法或者三帧差法检测移动物体

关于C版本帧差法可以参考博客 [C]OpenCV基于帧差法的运动检测-CSDN博客https://blog.csdn.net/FL1768317420/article/details/137397811?spm1001.2014.3001.5501 我们将参考C版本转成opencvsharp版本。 帧差法&#xff0c;也叫做帧间差分法&#xff0c;这里引用百度百科上的…

【力扣每日一题】1026. 节点与其祖先之间的最大差值

LC 1026. 节点与其祖先之间的最大差值 题目描述 给定二叉树的根节点 root&#xff0c;找出存在于 不同 节点 A 和 B 之间的最大值 V&#xff0c;其中 V |A.val - B.val|&#xff0c;且 A 是 B 的祖先。 &#xff08;如果 A 的任何子节点之一为 B&#xff0c;或者 A 的任何子…

https证书申请方式

网站HTTPS证书&#xff0c;也称为SSL证书或TLS证书&#xff0c;是一种数字证书&#xff0c;用于在用户浏览器与网站服务器之间建立安全的加密连接。当网站安装了HTTPS证书后&#xff0c;用户访问该网站时&#xff0c;浏览器地址栏会显示为"https://"开头&#xff0c;…

CSS层叠样式表学习(文本属性)

&#xff08;大家好&#xff0c;今天我们将继续来学习CSS文本属性的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 四、CSS文本属性 4.1 文本颜色 4.2 对齐文本 4.3 装饰文本 4.4 文本缩进 4.5 行间距 4.6 文本…

简单的购物商城

SSM整合后的一个及其简单的商城&#xff0c;首页数据是模拟的&#xff0c;主要测试购物车模块 启动 创建数据库&#xff1a;shopping导入建表脚本&#xff1a;shopping.sql修改db.properties部署和启动项目&#xff08;项目的path为项目名&#xff09;访问 http://localhost:…

Python语言在地球科学领域中的应用

Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;Python能够运行在Linux、Windows、Macintosh、AIX操作系统上及不同平台&#xff08;x86和arm&#xff09;&#xff0c;Python简洁的语法和对动态输入的支持&#xff0c;再加上解释性语言的本质&…