解决naive 数据表格 固定列不生效的问题

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量486 收藏 8
点赞数 7
文章标签： html 前端 vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mango339/article/details/136054484
版权
文章讲述了在使用Vue的n-data-table时遇到的滚动条和固定列问题，通过在外部盒子设置100%宽度并使用max-contentforscroll-x属性解决了无滚动条的问题，同时指出了固定列层叠的解决方法——设置固定列宽度。
摘要由CSDN通过智能技术生成

        首先确定有没有添加必填属性，一个是scroll-x，另一个是fixed，但是我发现按照官方文档在代码中添加之后，依旧没有出现横向滚动条，没有固定列的效果，摸索的解决方案如下：在n-data-table外层去套一个盒子，设置宽度，我设置的是100%，然后关键点来了，scroll-x去设置为max-content，这样子就能顺利出现滚动条了。

        但是新的问题又产生了，我一拉滚动条，发现固定列层叠在一起了，解决这个问题，只需要将固定列的属性加上width就可以解决了，下面是相关代码，因为我们表格组件是经过封装的，所以这里n-data-table元素是用的组件名称

记录一下~防止自己忘记，也给大家提供一个解决思路

自在舒展的小兔程序员
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element UI中的table组件添加横向滚动条转载的加上自己的理解和问题
m0_59638694的博客
07-25 1137
elementui的table的横向滚动条不显示
Classification:数据挖掘分类机问题 - Naive Bayes 和 Naive Bayes with AdaBoost
07-09
数据挖掘是IT领域中一个关键的分支，...结合使用，它们可以提供更稳健、适应性强的分类解决方案，尤其在处理大规模数据和复杂问题时效果显著。在Python中，利用`sklearn`库可以轻松实现这些算法，进行数据分析和建模。
Naive ui表格固定阴影不展示
Web995的博客
04-14 239
一定要加 key 值
解决Naive UI使用了固定列和scroll-x后，数据表格撑开容器
u011843342的博客
12-15 1954
具体的原因是min-width:auto，导致出现撑开的问题，因为flex伸展是取的剩余空间，此时width大于容器空间，剩余空间是负的，自然就出问题了，我们将min-width设置为0，或者width设置为0，就可以强制将整个控件的空间占为己用。顶部的蓝色为30vw宽度的容器，下方是一个Naive UI的标签页，里面放了一个数据表格。可以看到，整个标签页Tab和上方最简单的30vw容器的尺寸是一致、计算正确的。而此时我们容器设置的max-width :100 %，并不起作用。
naive ui的table组件自定义列拖拽功能
sun_weitao的博客
07-31 795
仿照antd的table拖拽的效果，目前的代码还是有些不完善的地方，勉强可以用。
naive-ui低版本浏览器兼容问题n-data-table-＞scrollbar不适应父元素的高
HaHaTogether的博客
03-02 504
可以看到组件库封装scrollbar的时候，给了子组件(当前元素:last-child)一个flex-grow：1。在低版本浏览器部署项目的时候，naive-ui组件库data-table组件内容区域不能滚动。所以给当前元素一个display: flex;解决，要修改子组件高度继承，所以要更改父组件的direction。2. 继续看子元素，没有继承父组件的高度。
Naive-UI组件库中常用组件的属性（vue3+ts）
qq_45294587的博客
09-01 695
Naive-UI组件库中常用组件的属性（vue3+ts）
解决Vuetify v-data-table不能固定列的问题
cscodeer的博客
08-15 586
在Vuetify2版本中，官方文档没有提及到可以固定列的API，但是我们可以直接通过使用css中的粘性定位。
DCES.zip_DCES_naive data matlab_人工数据集_干扰分类_干扰检测
09-24
在本项目中，我们主要关注的是“DCES.zip_DCES_naive data matlab_人工数据集_干扰分类_干扰检测”这一主题。这个标题暗示了我们正在处理一个与数据科学和机器学习相关的任务，特别是利用朴素贝叶斯网络（Naive ...
最大化 AUC 以学习加权朴素贝叶斯以实现不平衡数据分类
02-03
在不平衡数据分类问题中，传统的分类算法如朴素贝叶斯（Naive Bayes, NB）可能会面临挑战，因为它们主要关注提高整体准确性，这在类别分布严重失衡的情况下可能导致对少数类别的预测效果不佳。针对这个问题，研究者...
Naive Bayes Classifier_NavieBayes_naivebayes_
09-29
**朴素贝叶斯分类器（Naive Bayes Classifier）** 朴素贝叶斯分类器是一种基于概率理论的机器学习算法，其核心思想是利用贝叶斯定理进行预测。该算法假设特征之间相互独立，这也是“朴素”一词的由来。尽管在现实...
Naive_Bayes_iris_贝叶斯检测_naive_bayes_
09-30
标题中的“Naive_Bayes_iris_贝叶斯检测_naive_bayes_”表明我们将探讨的是使用朴素贝叶斯算法对Iris数据集进行分类的问题。Iris数据集是一个经典的多类分类问题，而朴素贝叶斯是一种在机器学习领域广泛应用的概率...
使用 XPath 定位 HTML 中的 img 标签
Z_suger7的博客
07-18 979
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
html 关闭信息窗口
cuisidong1997的博客
07-14 349
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 941
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 771
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
dhtmlx-gantt甘特图数据展示
dy1717的博客
07-15 420
甘特图数据展示
原生html贪吃蛇？
weixin_52236586的博客
07-18 178
【代码】原生html贪吃蛇？
naive UI 表格选中样式
07-14
Naive UI 是一个基于 Vue.js 的 UI 组件库，它提供了一些常见的 UI 组件和样式。对于表格选中样式，Naive UI 提供了两种方式：通过 CSS 类名和通过 props。 1. 通过 CSS 类名：Naive UI 的表格组件支持通过 CSS 类名来自定义选中样式。你可以在表格的行或单元格上添加一个指定的 CSS 类名，然后在你的样式文件中定义该类名的样式。例如，你可以在某一行或单元格上添加 `naive-table__row--selected` 类名，并在样式文件中定义该类名的样式，来实现选中样式的自定义。 2. 通过 props：Naive UI 的表格组件也提供了一些 props，可以用于配置选中样式。具体来说，你可以使用 `:row-class-name` 和 `:cell-class-name` 这两个 props 来指定行和单元格的选中样式。通过设置这些 props 的值为一个函数，你可以根据具体的数据来动态地设置选中样式。 以上是 Naive UI 中实现表格选中样式的两种方式。你可以根据自己的需求选择其中一种或结合使用。希望能对你有所帮助！如有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值