s-table和columns初始化不完整，造成table文件的filter报错

最新推荐文章于 2025-01-13 14:16:54 发布
最新推荐文章于 2025-01-13 14:16:54 发布
阅读量677 收藏 7
点赞数 11
CC 4.0 BY-SA版权
文章标签： 前端
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45266979/article/details/136350398
文章讲述了在开发过程中遇到的问题，涉及到了错误处理文件和Vue组件间的关联。作者追踪到错误源于`columnsSetting`的值问题，发现由于`columns`在`onMounted`后才被赋值为`ref([])`，导致组件渲染时为`null`而非`[]`。修正了这个问题后，S-table组件的错误得以解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

在这里插入图片描述

顺藤摸瓜找errorHandler.js文件

在这里插入图片描述
发现文件并没有什么问题

顺藤摸瓜找index.vue文件

在这里插入图片描述
首先找到报错的filter，发现与columnsSetting相关
在这里插入图片描述
找到columnsSetting发现等于columns
在这里插入图片描述
返回自己使用S-table组件的地方，发现columns初始化时仅初始化为ref()未表明格式以及未赋予初始数据，并且给columns赋值发生在onMounted处
在这里插入图片描述
在方法initColumns中才给columns赋值
在这里插入图片描述
由此推断有可能是渲染问题，当组件渲染出来时，columns为null并不为[]，
请求完onMounted后，columns才被赋值。
尝试给columns 赋初始空值 const columns = ref([])
经测试后，发现推断正确，S-table不再报错。

s-table通过Promise可不调用后端接口返回前端自己创建或维护的数据
每一次跌倒都是为了华丽的站起来。
04-23 196
【代码】s-table通过Promise可不调用后端接口返回前端自己创建或维护的数据。
＜s-table＞、＜a-table＞接收后端数据
qq_59833893的博客
02-11 1474
template #bodyCell=“{column, record, index}”>，一直以来都是只使用，column为列属性，record为每行数据记录，而index为每行索引，从0开始，想要获得直接使用ndex即可，不同行index值不同，0、1、2…并不是实体类中所有的属性名称，而是 columns 中定义的数据；record 为集合中每一条数据，相当于一个实体类中所有的数据；title: 用户名,
Surely Vue Table（S-Table）——一款针对大数据量的多功能前端表格组件
carcarrot的博客
08-01 1432
团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿。该组件4.0 及以上版本组件底层默认依赖 Ant Design Vue 4.x 版本组件库，但当然这并不影响你使用其它组件库。如题， Surely Vue Table（S-Table）是一款针对大数据量的多功能前端表格组件， 请了解！Surely Vue Table 是。
antd vue ＜s-table＞
a nice day
03-07 241
antd vue
Ant Design Vue 表单组件table之 ＜s-table＞
wind1_rain的博客
10-14 1万+
代码如下： # 查询条件 <a-form layout="inline"> <a-row :gutter="48"> <template v-if="advanced"> <a-col :md="8" :sm="24"> <a-form-item label="id"> <a-input v-model="queryPara
bootstrap-table相关包.zip
10-22
5. `extensions`目录：Bootstrap Table有许多扩展功能，如export（数据导出）、filter-control（过滤控制）等，这些功能可能以单独的JS和CSS文件形式存在，允许开发者根据需要选择性地引入。 6. `examples`或`demo`...
vue 仿el-table原理实现表格
shaoduo的博客
01-11 5060
element-ui是非常不错的开源框架，el-table组件在element-ui整个框架中是最复杂、最重要的部分。其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。出于好奇和挑战，在网上受教于el的源代码以及网上相关内容资料。完成了一个简单基础的table组件 取名为 sd-table。 支持功能： 自定义列、支持自定义插槽、支持自定义排序、支持全选、多选、分页回调、宽高样式等。 1.效果图 2.代码 2.1 sd-table-body.js ...
bootstrap-table 很有用
09-26
- **筛选**：通过 `data-filter-control` 属性可以为列添加过滤输入框，例如 `data-filter-control="input"`。 - **分页**：默认情况下，Bootstrap Table 会自动分页，你可以通过 `data-page-size` 设置每页显示的...
仿el-table实现表格控件（内含作用域插槽访问数据， JSX， render）
qq_34295211的博客
01-03 2352
前阵子看了饿了么的el-table源码，自己动手封装了一个具有下拉加载功能的表格控件，其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。该组件实现了下拉加载，作用域插槽访问数据，加载动画，和宽度自适应这些主要效果，以及一些el-table常用的属性。下面是实现的效果动态图，点击大图查看效果更好： 由于gif动态图不太清晰，下面放送两张...
bootstrap-table无法按预期方式显示结果的问题
2023年最新地推相关信息
10-04 742
我尝试让后台自动推送了包含20220800001、20220800002两个单号的数据，在前端页面输入2022或202208这样共有的字符时，两个条数据都可以查询的到，但是输入20220800001则只能查询到20220800001这一条数据，我查看了下代码，bootstrap-table没有filterby的设置，只有refresh设置，所以不知道为啥会被筛选，而不是后台返回的数据直接全部体现在bootstrap-table上。formatSearch: () => { return '测试 },
S-Table内嵌表格手风琴以及时刷新功能
每一次跌倒都是为了华丽的站起来。
01-13 319
S-Table内嵌表格手风琴以及时刷新功能
Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(一)
热门推荐
谷子的博客
05-30 4万+
Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中，官方提供了一个Table 表格组件。我们先来介绍一下这个组件 Table 表格组件 https://vue.ant.design/components/table-cn 基础用法 分页组件，部分字段高亮特殊显示等等。详细使用请查阅文档。 筛选排序 当然也可以在列表上方做常规搜索，会在后面的S-Tab...
Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(二)
谷子的博客
07-11 2万+
在之前的一篇文章中，对S-Table组件的的数据加载和数据渲染，以及分页参数的使用进行了描述： https://blog.youkuaiyun.com/gu_wen_jie/article/details/90702427 这一篇中，我想展示的是关于如何使用slot插槽来进行一些数据的过滤展示，或者说成过滤不是太准确，但是用到的确实就是过滤器，filters,具体的场景就是： 比如后端给你返回的一个字段：...
s-table中实现分页+单选
qq_59833893的博客
11-30 831
【代码】s-table中实现分页+单选。
多种情况下合并单元格(S-Table+Vue3)
每一次跌倒都是为了华丽的站起来。
04-16 920
跨行合并：rowspan=“合并单元格的个数” 跨列合并：colspan="“合并单元格的个数”
Antd中s-table组件某字段进行排序
qq_59833893的博客
03-13 1141
提前说明，s-table组件包含分页等功能
table的Column的ellipsis属性
weixin_45348207的博客
06-20 1808
Antd的table超出父元素宽度
a-table父级和子集选中不关联
最新发布
02-12
### 实现 a-table 组件中父级与子集选中状态联动 为了使 `a-table` 中的父级和子集选中状态能够相互关联，可以按照以下方式实现： #### 1. 初始化表格数据结构 确保每一行的数据项都包含一个表示是否被选中的属性（例如 `checked`），以及用于存储其子项的数组。 ```javascript const columns = [ { title: 'Name', dataIndex: 'name' }, // ...其他列定义 ]; // 表格初始数据 const data = ref([ { key: '1', name: 'Parent Item 1', children: [ { key: '1-1', name: 'Child Item 1' } ] }, // 更多数据... ]); ``` #### 2. 自定义 Checkbox 渲染器 通过自定义渲染函数来控制复选框的行为逻辑。当用户勾选某个项目时，会触发相应的事件处理程序更新该条目及其后代的状态；反之亦然——即当所有直系孩子都被选定时自动标记父亲为已选中。 ```vue <template> <a-checkbox :checked="record.checked" @change="(e) => handleCheck(e.target.checked, record)"> {{ record.name }} </a-checkbox> </template> <script setup lang="ts"> import { defineProps } from "vue"; defineProps({ record: Object, }); function handleCheck(isChecked: boolean, item: any): void { setItemAndChildrenSelection(item, isChecked); } function setItemAndChildrenSelection(item: any, checkedState: boolean): void { item.checked = checkedState; if (item.children && Array.isArray(item.children)) { item.children.forEach((childItem: any) => setItemAndChildrenSelection(childItem, checkedState)); } updateParentSelectionStatus(item.parentKey); // 更新上级的选择状况 } </script> ``` #### 3. 处理父节点的选择情况 每当更改任意一项的选中状态之后，都需要重新评估并调整它所属组别的根部成员所处的位置。具体来说就是检查当前节点是否有兄弟姐妹也被选择了，并据此决定要不要改变它们共同拥有的直接上层管理者的“全选”标志位。 ```typescript let parentKeysWithPendingUpdates = new Set(); function updateParentSelectionStatus(parentKey?: string | number): void { if (!parentKey || !data.value.some(d => d.key === parentKey)) return; let allChildrenSelected = true; const directChildrenOfThisParent = getDirectChildrenByParentKey(parentKey); for (const child of directChildrenOfThisParent) { if (!child.checked) { allChildrenSelected = false; break; } } const parentNode = findNodeByKey(data.value, parentKey); parentNode.checked = allChildrenSelected; if (parentNode.parentKey !== undefined) { parentKeysWithPendingUpdates.add(parentNode.parentKey); } [...parentKeysWithPendingUpdates].forEach(keyToUpdate => updateParentSelectionStatus(keyToUpdate)); parentKeysWithPendingUpdates.clear(); } function getDirectChildrenByParentKey(parentKey: string | number): any[] { return data.value.filter(node => node.parentKey === parentKey); } function findNodeByKey(nodes: any[], targetKey: string | number): any { for (const node of nodes) { if (node.key === targetKey) return node; if (node.children?.length > 0) { const resultFromSubtreeSearch = findNodeByKey(node.children, targetKey); if (resultFromSubtreeSearch) return resultFromSubtreeSearch; } } } ``` 上述代码片段展示了如何构建一个简单的父子关系链表模型，并实现了基本的功能需求[^1]。需要注意的是实际应用环境中可能还需要考虑更多边界条件和其他业务场景下的特殊要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值