在el-table中对某一个列使用过滤器处理字符串时，报错

最新推荐文章于 2024-07-04 15:06:45 发布
最新推荐文章于 2024-07-04 15:06:45 发布
阅读量111 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhouJingID/article/details/133065204
版权

TypeError: Cannot read properties of undefined (reading 'split')     at longitude (index.vue:500:1)

这种错误出现的原因是你在 Vue 模板或计算属性中尝试访问了一个不存在的属性或方法，或者访问了一个未初始化的数据。

所以我使用了条件渲染（例如 v-if 或 v-for），确保在使用之前检查对象存在解决了这个问题

ZhouJingID
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table组件动态创建列并填充值+自定义表头+自定义列模板+过滤
郭宝的博客
09-25 2406
核心代码： <template> <el-table v-loading="loadingDadaInfo" :data="dataInfos" style="width: 100%" stripe border height="300" > <!-- 动态创建列 ...
element-ui 踩坑 table 表格动态添加筛选属性filters报错
卡卡罗特的博客
11-26 2950
element-ui table 表格动态添加筛选属性filters报错问题处理
vue 3.x 不支持filters的解决方案
xiaoenwu的博客
01-08 1192
vue 3.x 不支持filters的解决方案 一、简单的操作可以在v-for中使用 <div v-for="(item,index) in list.filter(item => if(item){return item}else{return "没有内容"})" :key="index"></div> 二、复杂的操作可以在全局定义filter var app = createApp(app) app.config.globalProperties.$filters =
el-table如何实现筛选功能，以及filters,filter_method详解
热门推荐
m0_51312071的博客
05-20 1万+
在 ElementUI 的 el-table 组件中，提供了一个 el-table-column 组件的 filters 属性，可以用于对表格数据进行筛选操作。在 ElementUI 的 el-table 组件中，el-table-column 组件的 filters 属性确实是用于定义筛选菜单的选项列表。在上面的代码中，我们在 data 函数中定义了筛选菜单和表格数据，当用户选择某个筛选菜单项后，filterMethod 函数会根据选项的值对表格数据进行过滤，只保留符合条件的行。
element-ui的el-table更改筛选值filtered-value后不起作用
changyana的博客
11-24 2856
按照一般的思维，当我在js里赋值 this.filter_value = [‘111’, ‘222’] 之后，table表格应该只加载出topic_name=‘111’和topic_name=‘222’的行信息。但是通过js动态改变筛选数组后，筛选出来的数据还是首次的筛选数组的内容。
Vue「过滤器」的使用，自定义过滤器 filters （Vue的过滤器filters在Element表格el-table中的应用 ）
ddx2019的博客
05-12 6260
更多用法，参考vue官网 参考的博客链接：https://juejin.im/post/5c8607aee51d45425906c8a9
element table 过滤器_Vue的过滤器filters在Element表格el-table中的应用 （Vue「过滤器」的使用，自定义过滤器 filters ）...
weixin_32688511的博客
01-15 4226
一、Vue过滤器filters的优点和使用场景1. 优点：filters不会修改数据，只是改变用户看到的输出(效果)(计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示)。2. 使用场景：需要格式化数据的情况，比如我们需要处理 时间、价格等数据格式的输出 / 显示。比如后端给你返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可...
vue-element el-table 使用sortablejs拖拽排序
小方块的世界
04-11 3799
需求描述 vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。 问题分析 方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果不太好。 方法二：可以采用table的拖拽功能实现行的一次性拖拽。该方法可以实现拖拽后调用接口，任意移动多行，但是需要依赖sortablejs仓库。 问题解决 综合考虑决定使用sortablejs实现该功能。
element-ui表格el-table的使用
m0_63040701的博客
06-01 6769
element-ui表格Table详解。
element-ui表格列金额显示两位小数的方法
10-18
在Vue实例中定义一个名为`rounding`的过滤器： ```javascript filters: { rounding(value) { return value.toFixed(2); } } ``` `toFixed()`是JavaScript中处理数字的内置方法，它将数字四舍五入到指定的小数...
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
10-20
在本文中，我们将深入探讨Vue.js的基础概念，包括Vue实例的生命周期、数据绑定、手动挂载、指令以及过滤器。 1. **Vue实例的生命周期**： Vue实例从创建到销毁的过程称为生命周期。包括`beforeCreate`、`created`...
Java学习笔记-个人整理的
12-19
{2.8}框架中移动的小球}{59}{section.2.8} {2.9}抽象与接口}{59}{section.2.9} {2.10}访问控制}{60}{section.2.10} {2.10.1}类的属性}{60}{subsection.2.10.1} {2.10.2}类的方法}{61}{subsection.2.10.2} {...
java开源包1
06-28
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
java开源包10
06-28
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 211
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1293
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 192
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
最新发布
黔肆的博客
07-04 253
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
vue中对el-table某一列数据进行去重处理
06-03
在 Vue 中对 el-table 某一列数据进行去重处理，可以使用 computed 计算属性来实现。 首先，假设我们的表格数据是一个数组，如下所示： ```javascript data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 18 }, { name: '赵六', age: 20 }, { name: '钱七', age: 22 }, ], }; }, ``` 假设我们要对表格中的年龄列进行去重处理，可以使用 computed 计算属性来实现。 ```javascript computed: { distinctAges() { const ages = this.tableData.map(item => item.age); return [...new Set(ages)]; }, }, ``` 在模板中通过 v-for 循环渲染计算属性中去重后的年龄数据。 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> {{ scope.row.age }} </template> <template slot="header"> <span v-for="age in distinctAges" :key="age">{{ age }}</span> </template> </el-table-column> </el-table> ``` 这样就可以在表格的年龄列中展示去重后的年龄数据了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值