位置: IT常识 - 正文

vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】(vue antdesign)

编辑:rootadmin
vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】 vue3 antd项目实战——table表格自定义筛选(使用filters属性实现表头列columns自定义筛选)往期知识调用(步骤不懂就看这儿)场景复现实战演示实例1——筛选发布状态🔥1、双向绑定表格列目录、表格数据2、编写列目录内容及参数类型3、在columns中添加自定义筛选功能🔥实例2——筛选通知状态实例3——筛选部门1、列目录columns数据、参数类型columnType2、在columns中添加filters和onFilter实现自定义筛选往期知识调用(步骤不懂就看这儿)文章内容文章链接vue3 antd table表格的基础搭建https://blog.csdn.net/XSL_HR/article/details/128072745ant design vue组件库的引入与使用https://blog.csdn.net/XSL_HR/article/details/127396384场景复现

推荐整理分享vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】(vue antdesign),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antd of vue,antd-vue-pro,antd vue教程,vue3+antd,antd vue3.0,vue+antd,vue+antd,antd vue教程,内容如对您有帮助,希望把文章链接给更多的朋友!

在后台管理系统中,我们需要对大量的数据进行展示、处理和操作,table表格也因此无处不在。而ant design vue组件库中的table表格,给出了诸多属性来方便数据管理。本期文章向大家介绍的是filters属性——在表头添加自定义筛选功能,实现对表格列数据自定义筛选。

需求:表格数据能够在表头进行自定义筛选操作 方法:借助ant design vue组件库的filters属性

最终效果:(部分页面)

实战演示

下面将用三个具体的项目例子来具体介绍,如何实现table表格的自定义筛选。

项目的UI框架依旧采用ant design vue组件库(移步官方文档查看详情)

实例1——筛选发布状态🔥

页面的实现这里就不过多阐述了,直接进入正题,怎么实现自定义筛选

1、双向绑定表格列目录、表格数据<a-table :columns="columns" :dataSource="tableData" style="margin-top:5px" > <!--表格内的插槽及数据渲染--></a-table>2、编写列目录内容及参数类型

(1)目录内容:

const columns = ref<columnsType[]>([ { title: "新建人", dataIndex: "create_user", key: "create_user", width: 120, align: "center", }, { title: "新建日期", dataIndex: "create_date", key: "create_date", width: 120, align: "center", customRender:function({text} : any) { return dayjs(text).format("YYYY-MM-DD"); }, }, { title: "发布状态", dataIndex: "enable", key: "enable", width: 100, align: "center", }, { title: "邮箱状态", dataIndex: "email", key: "email", width: 100, align: "center", }, { title: "操作", dataIndex: "operation", key: "operation", width: 200, align: "center", },])

(2)参数类型(里面的每个参数分别对应什么,已注释表明)

export interface columnsType { title: string; // 标题 dataIndex: string; // 数据 key: string; // 键值 width: number; // 宽度 align: string; // 位置 customRender?: any; // 插槽 sorter?: any; // 排序 sortDirections?: any; // 排序方式 fixed?: string; // 固定列 filters?: any; // 筛选 onFilter?: any; // 本地筛选}vue3 antd项目实战——table表格的自定义筛选【纯前端filters过滤、自定义筛选table表格数据】(vue antdesign)

官方文档中的详细说明:

3、在columns中添加自定义筛选功能🔥 filters: [ { text: '已发布', value: 1 }, { text: '未发布', value: 0 }, ], onFilter: (value: number | string | boolean, record: tableDataType) => record.state === value,

解释说明:

filters中存放的是一个数组,数组的元素个数即为筛选项的个数,每一个元素对应两个参数,分别是text和value,text对应页面展示出来的筛选项文本,value则与数据的属性值一一对应。(当然在我的表格数据中,代表发布状态的属性值state为1即已发布,为0则未发布)onFilter和filters可谓成对出现,有filters的地方,onFilter也一定存在。(前提为本地筛选)onFilter对应的是一个函数,函数有两个变量value和record,分别对应筛选项对应的值和表单中该列数据所对应的值,当这两个值相等时,则表示筛选成功,并将筛选后的数据展示在页面中。

最终实现效果(部分页面): 其实并不难,看官方文档的教程不如来看看实战操作,立马学会。下面我们来复用一下上面的方法,再实现几个自定义筛选。

自己写数据的时候,如果有报错,要么是数据类型出了问题,要么是少了数据,要么是少了逗号等标识符

实例2——筛选通知状态

我们接着上面的框架,对邮箱通知状态进行自定义筛选。

filters: [ { text: '已通知', value: 1 }, { text: '未通知', value: 0 }, ], onFilter: (value: number | string | boolean, record: tableDataType) => record.email === value,

最终实现效果: 和实例一类似,除了参数和数据以外,逻辑上几乎没有区别,如果还有点模糊的话,来看看第三个实例吧。

实例3——筛选部门1、列目录columns数据、参数类型columnTypeinterface columnType { title: string; dataIndex: string; key: string; width: number; align: string; customRender?: any; filters?: any; onFilter?: any; children?: any; // 子表格 tags?: any; // 标签 fixed?: any}const columns = ref<columnType[]>([ { title: "部门", dataIndex: "files_department", key: "files_department", width: 195, align: "center", { title: "入职档案", dataIndex: "files_onboard", key: "files_onboard", width: 270, align: "left", },]) 2、在columns中添加filters和onFilter实现自定义筛选 filters: [ { text: '技术研发与测试部', value: '技术研发与测试部' }, { text: '产品与UED部', value: '产品与UED部' }, { text: '综合管理部', value: '综合管理部' }, { text: '学科教研部部', value: '学科教研部' }, { text: '校园媒体部', value: '校园媒体部' }, ], onFilter: (value: string, record: tableDataType) => record.files_department === value,

最终实现效果:

想必看到这里的你,一定学会了如何自定义筛选表格数据了吧! 若有疑问,欢迎评论区留言或私信~

后期文章将进一步介绍table表格的一些骚操作,比如各种规则排序

感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~

觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

本文链接地址:https://www.jiuchutong.com/zhishi/287301.html 转载请保留说明!

上一篇:无人驾驶-控制-阿克曼模型(无人驾驶控制方向)

下一篇:vue+el-upload 上传图片和视频小总结(vue上传文件和后端upload)

  • 发说说怎么艾特qq好友(发说说怎么艾特不是好友的人)

    发说说怎么艾特qq好友(发说说怎么艾特不是好友的人)

  • hd3000相当于什么显卡(hd3000相当于什么n卡)

    hd3000相当于什么显卡(hd3000相当于什么n卡)

  • 荣耀手机的性能模式有用吗(荣耀手机的性能模式有什么用)

    荣耀手机的性能模式有用吗(荣耀手机的性能模式有什么用)

  • ios电池健康剩多少可以换电池(iphone电池健康容量多久掉1%)

    ios电池健康剩多少可以换电池(iphone电池健康容量多久掉1%)

  • word2010版怎样自动生成目录(word自行设置)

    word2010版怎样自动生成目录(word自行设置)

  • 电脑没有声音是什么原因造成的(电脑没有声音是哪根线插错了)

    电脑没有声音是什么原因造成的(电脑没有声音是哪根线插错了)

  • qq正在录音因此暂时无法录音(qq正在录音因此微信暂时无法录音)

    qq正在录音因此暂时无法录音(qq正在录音因此微信暂时无法录音)

  • 苹果手机照片删除云端还有吗(苹果手机照片删除了icloud里还有吗)

    苹果手机照片删除云端还有吗(苹果手机照片删除了icloud里还有吗)

  • 文件被占用无法发送是什么意思(文件被占用无法发送怎么办)

    文件被占用无法发送是什么意思(文件被占用无法发送怎么办)

  • 小米手环支付宝能离开手机吗(小米手环支付宝出行码)

    小米手环支付宝能离开手机吗(小米手环支付宝出行码)

  • 打开资源管理器的三种方式(打开资源管理器的命令)

    打开资源管理器的三种方式(打开资源管理器的命令)

  • 电池损耗18%需要换吗(电池损耗18%需要换电池吗)

    电池损耗18%需要换吗(电池损耗18%需要换电池吗)

  • opo手机老重启怎么回事(oppo手机怎么老重启)

    opo手机老重启怎么回事(oppo手机怎么老重启)

  • 录音权限被占用怎么办(录音权限被占用怎么解除)

    录音权限被占用怎么办(录音权限被占用怎么解除)

  • 苹果手机静音键怎么设置(苹果手机静音键失灵怎么调出声音)

    苹果手机静音键怎么设置(苹果手机静音键失灵怎么调出声音)

  • 电脑安装软件安装在哪个盘里面(电脑安装软件安装包在哪里)

    电脑安装软件安装在哪个盘里面(电脑安装软件安装包在哪里)

  • 200兆宽带用什么网线(200兆宽带用什么路由器合适)

    200兆宽带用什么网线(200兆宽带用什么路由器合适)

  • wps怎样删除指定行(wps怎样删除指定页)

    wps怎样删除指定行(wps怎样删除指定页)

  • 华为nfc关闭自动启动(华为nfc怎么关掉自动开启)

    华为nfc关闭自动启动(华为nfc怎么关掉自动开启)

  • xp系统如何连接投影仪(电脑装了系统没有网络连接)

    xp系统如何连接投影仪(电脑装了系统没有网络连接)

  • ipad无法下载微信怎么办(ipad无法下载微信不兼容)

    ipad无法下载微信怎么办(ipad无法下载微信不兼容)

  • 天猫最长几天确认收货(天猫最多几天确认收货)

    天猫最长几天确认收货(天猫最多几天确认收货)

  • 手机通知栏hd怎么关闭(手机通知栏hd收费吗)

    手机通知栏hd怎么关闭(手机通知栏hd收费吗)

  • 如何修改程序的默认安装路径(如何修改程序的安装路径)

    如何修改程序的默认安装路径(如何修改程序的安装路径)

  • 为什么wps是以文档链接分享(为什么wps以文件发送失败)

    为什么wps是以文档链接分享(为什么wps以文件发送失败)

  • 怎样下载新闻里的视频(首页新闻怎么下载)

    怎样下载新闻里的视频(首页新闻怎么下载)

  • 鸟瞰施内贝格山脉-奥克森峰,德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)

    鸟瞰施内贝格山脉-奥克森峰,德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)

  • 房地产开发企业资质等级有几个
  • 应交税费的借贷方向
  • 企业稳岗返还申请报告模板
  • 企业罚职工的钱违法吗?
  • 利润分配未分配利润是什么科目
  • 经营性收入包括投资收益吗
  • 进项税额转出冲红
  • 税务局登录账号是多少
  • 土地以租代卖,违法吗
  • 注销地税需要缴纳什么税费
  • 融资租入固定资产属于资产吗
  • 发票开具丢失后如有罚款怎么处理?
  • 年会费用的会计分录
  • 工会经费有关的增值税能否抵扣?
  • 小规模纳税人税收政策2023
  • 不同类型商业分布的特征
  • 个人从上市公司取得的分红个税怎么申报
  • 发票上电话可以写手机号吗
  • 事业单位开发成本占比
  • 保险公司代收车船税完税证明在哪里打印
  • 补发工资如何缴纳工人所得税的法条
  • 实木地板增值税怎么算
  • 企业怎样信用升级
  • 个税在发工资的时候直接扣下来吗
  • 老板私车转让给老板
  • bios设置技巧
  • 鸿蒙3.0平板适配名单
  • 如何用python查数据
  • 收到员工水电费怎么做账
  • 电脑装系统分区出现错误
  • vue3 超好用的富文本编辑器
  • php的array函数
  • 纳税申报方式有直接申报邮寄申报数据电文
  • wordpress恢复主题默认设置
  • PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
  • 怎样把htm文件转成excel
  • 金税盘一定要有吗
  • 销售多余的材料
  • 小规模企业收到发票
  • php投票系统代码
  • 刚刚学完小车可以学摩托车吗
  • PHP自定义函数实现计算机整数的四次方
  • php面向对象的机制
  • 基本户发工资的规定
  • 批处理命令在windows操作中的典型应用
  • 个人发票抬头和公司发票抬头有什么区别
  • 钢筋增值税专票几个点
  • 预计表示什么意思
  • 企业出租专利技术收取的租金不得确认为收入对吗
  • 企业现金流量表怎么分析
  • 什么是公司财务管理中的一个重要组成部分
  • 个人开技术服务费
  • 如何加强存货管理,提高存货周转率
  • 建筑劳务没有合同能起诉吗
  • 航天税盘服务费分录
  • sql server执行语句
  • JDBC探索之SQLException解析
  • mysql5.7.32免安装教程
  • mssql查找备注(text,ntext)类型字段为空的方法
  • win7系统IE浏览器版本
  • u盘比特率
  • win10专业版系统安装教程
  • win10开始菜单怎么打开
  • react native 应用
  • nodejs mocha
  • vlw框架论坛
  • python排列代码
  • 基于Android的人脸门禁系统
  • python3中map
  • zabbix 微信
  • js中遍历的方法
  • Python实现Sqlite将字段当做索引进行查询的方法
  • 进口消费税怎么入账
  • 所得税季度预缴,年度汇算清缴
  • 土地增值税按什么价格
  • 安徽省各地区最低录取中考分数线
  • 单位纪检员和纪检委员区别
  • 车船使用税2021
  • 印花税票有什么用
  • 增值税专用发票注明的金额是含税还是不含税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设