Antd of vue中table的筛选功能，选中样式失效

最新推荐文章于 2024-07-19 16:52:28 发布
最新推荐文章于 2024-07-19 16:52:28 发布
阅读量2.6k 收藏
点赞数
分类专栏： 前端样式框架 文章标签： vue.js ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Antoinette_Xiao/article/details/104513624
版权

场景

表格筛选的filters数据是我异步获取的，一开始怀疑是不是异步获取的原因，后来实在找不到原因，就单独建了一个新页面，把官方文档放进去单独调试，看什么时候会出现样式失效的，失效如下图，选中了，但是没有选中样式
选中但是没有效果
后来发现原因，跟filters数据有关，不过不是因为异步
filters的格式
上图是filters的格式，每个对象都有text和value两个值，按照我这边的需求，value是个id，id是个整数，所以不行， 我后面把我的id改成字符串格式，居然就可以了
正常的选中样式

Antoinette_Xiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant-design-vue checkbox checked不生效
qq_36987708的博客
05-17 8432
ant-design-vue checkbox checked不生效 https://segmentfault.com/q/1010000018981910 基本用法
antd vue适配ie浏览器中出现的若干问题
loganwz的博客
12-21 855
因为vue项目上用户有ie浏览器的使用需求，因此适配了ie浏览器，在适配的过程中遇到了一些问题，分享一下。
ant-design的table，表格选中不显示选中状态
weixin_56728548的博客
06-23 1934
ant-design的table，表格选中不显示选中状态
vue-antd-table 自定义筛选 只筛选当前页；
最新发布
m0_62651421的博客
07-19 667
/ 当前是否是筛选状态 0.3s内。判断 isOnFilter = false 不会请求分页接口会保持在当前页面；点击筛选和重置要将 isOnFilter.value = true。需求：产品要求列表的表头可以筛选且只筛选当前页面；配置 - customFilterDropdown。配置插槽 customFilterDropdown。0.3秒后 = false。-isOnFilter 设置是否筛选。配置- filteredValue。
Antd中Table组件筛选报错：Cannot read property 'toString' of null
weixin_44956861的博客
11-23 6028
由字面意思可以发现这里的record应该是空的 先放解决方法： 在可以搜索的那一列 传递的数据不能有空值！ record所在位置： 关于onFilter是一个搜索函数在antd的API上的文档有 我们打印一下 、 可以看到其中有一个空值，这里就是问题所在 因此：在可以搜索的那一列 传递的数据不能有空值！ 有错误时的表格： 只要那一格不为空即可 ...
ant design Table 新增一行，筛选时 onchange事件的filters属性没有拿到新增的值。导致过滤不出来新增的一行
miin_ying的博客
06-09 508
js 引用类型值不能直接使用
vue中 a-table自定义选项row-selection，解决不能选中的问题或者跳转页码时前面勾选的内容会不再勾选的问题。
qq_56938323的博客
08-02 2159
不能进行勾选或第二页勾选后，第一页勾选过的都清除了。
自定义插件中引用antd组件，在项目中antd 组件样式失效解决
weixin_43865681的博客
01-26 940
自定义了一个组件，style={{}}里面定义的样式都有效果，但是Antd 组件 Table ,DirectoryTree的样式失效。 最终解决方案是在插件的项目目录中修改。.babelrc文件里面的{ }中plugins配置 { "plugins": [ 'transform-react-jsx', [ "import", { libraryName: "antd", libraryDirectory: "es",
Vue+Ant Design of Vue二次封装Table+Pagination 组件
weixin_56749645的博客
05-10 2910
Vue+Ant Design of Vue组件Table+Pagination二次封装 前言 在Vue的Ant-Design-Of-Vue-Table组件中，你可以对ant-design-of-vue-Table组件进行二次封装，这样可以减少页面代码重复，使页面代码更简洁、更容易操作。 1.新建一个table.js文件(T...
ant dve 表格选中翻页失效问题
yantujing的博客
02-24 895
<!-- 表格 --> <ele-pro-table ref="table" row-key="memberId" :datasource="url" :selection="showSelection ? selection : []" @update:selection="onSelectionChange" :columns="columns" :where="where" :scroll="{ x: false }" :rowSelection="{ onSe
移动端table组件(带全屏旋转功能)——解决Ant Design Vue的a-table组件旋转页面后在移动端中滚动轴失效的问题
lss_033_lss的博客
04-30 901
Ant Design Vue(3.2.13)的a-tablevue3在移动端开发中需要给页面增加一个table组件展示数据，并且组件带有全屏功能（点击全屏按钮后，弹出对话框窗口，横屏展示该table）。但在旋转页面后，发现table的X轴滚动失效。组件样式：由于横屏展示是通过transform将页面旋转90度实现的，旋转后原X轴变成了Y轴，但组件仍需要按照盒子的原方向去计算滚动(滚动、宽高等需要按盒子未旋转前方向)。所以造成了计算数据的混乱，导致触碰拖动滚动表格失效。
解决ant design vue中树形控件defaultExpandAll设置无效的问题
01-18
页面步骤： 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果： 设置defaultExpandAll无效，并不能展开所有节点 原因： defaultExpandAll 仅在...Tree中的api属性
ant-design table 勾选框选择框点击无反应 rowSelection 无效
笔记库
01-18 1090
ant-design table 勾选框选择框点击无反应 rowSelection 无效
el-table的勾选回显不成功原因和修改方式
南漂一枚
08-14 1234
el-table勾选的回显不成功的处理方式
vue3 + antd Table组件排序filters、筛选sorter、自定义表头展示
agua001的博客
03-07 7997
antd Table组件使用筛选、排序、自定义设置表头显示
antd的table进行列筛选时，更新dataSource，为什么table显示暂无数据？
weixin_33730836的博客
04-22 6220
我想当然地认为只要dataSource改变，那么<Table>组件就会重新渲染，但是有一种特殊情况例外：在onFilter()中不写筛选条件，在调用filterDropdown进行列筛选的时候，通过handleSearch改变/保存dataSource的状态，此时<Table>重新渲染，但是拿的不是dataSource={xxx}，而是拿的filterDropdown中...
ant中vue-table的使用(排序 搜索筛选)
weixin_43152108的博客
06-19 7104
官网api https://www.antdv.com/components/table-cn/ 虽然用法很多 但是很多API并没有写出实际的例子 并且原来我用的element 到这里初次使用很难看得懂,. <a-table :columns="columns" // 表头 :dataSource="data" // 数据源 :loading='loading' // 加载loading :pagination="pagination" // 页脚 :scroll="scrol
ant design table 可编辑值，当获取值之后，select值刷新不到的问题，以及设置单个单元格禁用或者可用
longmushasha的博客
06-19 1435
一“”设置单个单元格禁用或者可用： getFieldDecorator 此方法的rule没有设置disabled的规则，所以对单个设置禁用似乎有点无能为力，他的具体的API： 具体 ：https://blog.csdn.net/XUAN_1995/article/details/84582465 属性 说明 类型 默认值 getValueFromEvent 指定如何从事件中获取值，可以把 onChange 的参数（如 event）转化为控件的值 function(…args) initialValue 子
Antd table组件用rowSelection时报shiftKey undefined
coco723的博客
07-21 828
问题 在使用antd Table的rowSelection时，无法选中，报如下错误： 但是在codesandbox中，点击复选框，并不会报错 定位 https://juejin.cn/post/6844904138057187336 问题描述，和当前实际遇到的类似，项目中同时有PC端和移动端的，package.json中有antd和antd-mobile依赖，接下来就差验证了，直接去掉antd-mobile依赖，重新yarn安装，因为，PC端和移动webpack分开打包，所以本地直接yarn dev:p
antd of vue中的ant-image-img属性怎么改样式
06-13
在 `antd for Vue` 中，`<a-image>` 是用来展示图片的组件，而 `ant-image-img` 是这个组件内部的一个子组件，用来展示图片本身。您可以通过 `antd for Vue` 提供的 `style` 或 `class` 属性来修改 `ant-image-img` 组件的样式。 下面是一个例子，展示了如何修改 `ant-image-img` 的样式： ```html <template> <a-image :src="imageUrl" style="width: 200px;"> <template #placeholder> <div class="custom-placeholder">Loading...</div> </template> <template #fallback> <div class="custom-fallback">Failed to load image.</div> </template> </a-image> </template> <script> export default { data() { return { imageUrl: 'https://example.com/image.jpg', }; }, }; </script> <style> .custom-placeholder { background-color: #eee; color: #bbb; font-size: 16px; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .custom-fallback { background-color: #f00; color: #fff; font-size: 16px; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } </style> ``` 在上面的示例中，我们通过 `style` 属性来设置 `a-image` 的宽度，并通过 `template` 标签中的 `#placeholder` 和 `#fallback` 插槽来自定义图片加载时的占位符和加载失败时的提示。在这两个插槽中，我们通过自定义的 CSS 类来设置 `ant-image-img` 的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值