Vue3 ElementPlus 的 table 中使用过滤器

已于 2022-04-13 19:16:13 修改
阅读量4.7k 收藏 6
点赞数 2
分类专栏： Vue 文章标签： vue.js
于 2022-04-13 18:34:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wj1713520/article/details/124154456
版权
该博客介绍了如何在Vue3中结合ElementPlus的table组件，利用作用域插槽和过滤器将数字转换为易理解的描述性文字。文章强调Vue3中过滤器应通过方法或计算属性实现，并提供了具体的template和script setup代码示例，展示了如何定义数字对应的文字描述，并使用find方法找到匹配的描述进行显示。
摘要由CSDN通过智能技术生成

先附上官网 过滤器 | Vue.js (vuejs.org)

参考javascript - How to filter items in Vue 3？ - Stack Overflow

情景：根据不同数字去渲染出不同的描述性文字；而不是只显示让用户无法理解的数字。

以下代码后端bookType属性返回数字1、2、3、4，效果如图

    <el-table-column prop="bookType" label="图书类型" width="100">
    </el-table-column>

此时，我们需要根据这些数字去重新渲染出描述性文字；

我们就需要用到 ElementPlus的作用域插槽 和 Vue3中

最低0.47元/天 解锁文章
wj1713520
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Elementui：el-table 结合 filters 实现表头的筛选过滤功能
weixin_54362826的博客
10-22 4908
<el-table-column prop="location" label="安装位置" align="center" min-width="160" :filters="LocationList" :filter-multiple="false" :filter-method="typeFilter" filter-placement="bottom-start"
element table 添加自定义filter
samscat的博客
01-05 892
注意一定要配置 column-key。
element-plus的el-table自定义表头筛选查询
最新发布
i_am_a_div的博客
07-17 1091
element-plus的el-table自定义表头筛选查询
vue3+Element Plus 使用filter()实现搜索功能
m0_64397933的博客
06-27 5228
vue3+Element Plus 使用filter()实现搜索功能
Element Plus的表格组件中的筛选图标改变
MycoolMy的博客
03-24 2364
表格需要带有筛选功能，就是表头右上角有个图标，但是element的表格组件里面本来就是自带有筛选功能的，但是自带的筛选是下拉框相同的图标。
element-plus ui表格表头筛选功能
泽泽邬的博客
10-12 2655
element-plus ui表格表头筛选功能
Vue+ElementUI 表格中使用过滤器
qq_44888570的博客
02-02 1469
最近遇到一个这样的需求：超出几个字长度的话，就省略绝大部分内容并且加一个省略号。 其实不难，有各种方法可以实现，那么我这里突然想到用过滤器实现，研究后，表示可行。 过滤器写法 Vue.filter('formatLength', value => { return value.length > 9 ? value.slice(0, 9) + '...' : value }) 很简单，如果字符串的长度超过9，那么就会截取前九位并加三个点；如果说压根没超过9，那就作罢，直接返回原字串。
vue+elementui的el-table下filters过滤器的使用 小白
weixin_45890414的博客
11-27 9097
vue+elementui的el-table下filters过滤器的使用 小白 <el-table-column prop="sex" label="性别" :filters="filterList" :filter-method="handleFilterChange"> <template slot-scope="scope"> {{sexValue[scope.row.mold]}} </te
element-table中使用vue filter 过滤器
发育中的前端
03-19 1548
今天看到这样一个问题： 原先遇到这种需要转换的情况，我都是使用template通过判断row.scope的值进行操作的，像这样： <el-table-column prop="level" label="名称"> <template slot-scope="scope"> <span v-if="scope.row.level == 1">一级</span> <span v-if="scope.
element-plus el-table 输入框实时筛选
target_for的博客
07-07 2661
element-plus el-table 输入框实时筛选
element ui table 增加筛选的方法示例
12-29
网上大部分都可以增加筛选功能，但没有找到下列这种情况。 若表头数据较多，而表头是自己通过v-for循环产生，这种情况怎么给虚拟dom添加筛选规则。 列表头是通过v-for循环遍历出来的数据 如何添加规则内容 首先，element提供了filters，filter
Vue3+ElementPlus+TS
ianutt的博客
09-06 1334
Vue3
Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（图标选择器篇）
weixin_48453209的博客
06-09 2256
最近，在项目的开发中，我们规划了一个Icon组件，希望通过这个组件，能直接同时使用多种图标库的图标（一种语法,实现无限的图标扩展和高度兼容性）并且...
vue3+elementplus管理系统
06-21
在 Vue 3 中，你可以使用 Composition API 或者 Options API 来构建你的管理系统。 一个典型的 Vue 3 + Element Plus 管理系统会包括以下几个核心部分： 1. **组件化开发**：Element Plus 提供了一套丰富的预定义...
element vue 动态单选_如何在Vue3中使用Element Plus单选按钮组
weixin_34099891的博客
01-14 1363
工具HBuilderX浏览器Gitnpm技术Vue3Element PlusJavaScript在使用Vue3 + Element Plus搭建的项目时，可以使用Element Plus中的控件el-radio-button组控制输入框显示值。当单选按钮组值选中哪一个，对应输入框显示这个值。下面利用实例说明：操作步骤：1、打开HBuilderX工具，创建Vue3+Element Plus框架项目；...
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
程序员成长指北
01-11 2622
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言 ????ProTable 组件目前已是 2.0版本????，在 1.0版本[1] 中大家提出的问题与功能优化，目前已经得到优化和解决。???? 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star ????一、在线...
vue3.0 + element Plus实现前端筛选表格数据（按照日期选择）
m0_52761651的博客
11-10 3974
vue3.0 + element Plus实现前端筛选表格数据，按照日期选择
element-ui table 表头filter 使用实现重新向后台获取数据
下一个喵呜
04-02 7500
描述：当我们在使用element-ui的时候，常常用到表格，有表格就会有筛选。 这个时候往往会在表格上方使用筛选机的方式来实现筛选 像这样，但是一旦筛选条件增多，这个筛选机就会越来越长。这一点都不酷。 所以这边使用element提供的filters功能。 看了一下往上都说只能对已经有的数据进行筛选，不能后台筛选。 ？？？不分页的数据到无所谓，我一个分页的数据，一页10条，难不成前端筛选...
vue3 elementplus table合并单元格
09-08
要在Vue3中使用Element Plus的表格组件合并单元格，你可以按照以下步骤进行操作： 1. 首先，确保你已经正确安装和配置了Vue3和Element Plus。 2. 在你的组件中引入Element Plus的Table组件和其他必要的模块： ```javascript import { ElTable, ElTableColumn } from 'element-plus'; ``` 3. 在模板中使用Table组件，并定义表格的数据源和列属性： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> ``` 4. 在数据源中，使用`span-method`属性来定义合并单元格的逻辑。这个属性接受一个方法，该方法可以根据当前行和列的索引来决定是否需要合并单元格： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" :span-method="handleSpanMethod"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 22 }, { name: '王五', age: 22 }, { name: '赵六', age: 25 } ] }; }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex === 1 || rowIndex === 2) { return { rowspan: 2, colspan: 1 }; } } } } }; </script> ``` 在上面的例子中，我们使用`handleSpanMethod`方法来判断是否需要合并单元格。如果列索引为0，并且行索引为1或2，我们返回一个包含`rowspan`和`colspan`的对象，指定要合并的行数和列数。 这样就可以实现在Vue3中使用Element Plus的表格组件合并单元格了。你可以根据自己的需求进行适当调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值