vxe-table 3.10+ 进阶高级用法(一),根据业务需求自定义实现筛选功能

vxe-table 是vue中非常强大的表格的,公司项目中复杂的渲染都是用 vxe-table 的,对于用的排序。筛选之类的都能支持,而且也能任意扩展,非常强大。

默认筛选功能

筛选的普通用法就是给对应的列指定参数:
filters:[] 选项数组

在这里插入图片描述

<template><div><vxe-tableborderheight="400":data="tableData"><vxe-column field="id" title="ID"></vxe-column><vxe-column field="name" title="Name" ></vxe-column><vxe-column field="sex" title="Sex" :filters="sexOptions" :filter-multiple="false"></vxe-column><vxe-column field="age" title="Age" :filters="ageOptions"></vxe-column><vxe-column field="time" title="Time"></vxe-column></vxe-table></div>
</template><script>
export default {data () {const tableData = [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }]const sexOptions = [{ label: 'Man', value: '1' },{ label: 'Woman', value: '0' }]const ageOptions = [{ label: '28', value: 28 },{ label: '22', value: 22 },{ label: '38', value: 38 }]return {tableData,sexOptions,ageOptions}}
}
</script>

进阶扩展

在这里插入图片描述

上面看了普通用法,接下就详细讲一下扩展高级用法,这就涉及到渲染器了。筛选需要用法渲染的几个方法:
showTableFilterFooter // 是否显示筛选底部,可以关闭, 使用自定义底部
renderTableFilter // 自定义筛选模板
tableFilterResetMethod // 自定义重置数据方法
tableFilterRecoverMethod / 自定义重置筛选复原方法(当未点击确认时,该选项将被恢复为默认值)
tableFilterMethod // 自定义筛选方法

接下来就可以实现

定义渲染器

定义渲染器文件:src/plugins/vxe/render.js

// main.js
import { VxeUI } from 'vxe-table';
import FilterComplex from './filters/FilterComplex.vue';// 创建一个带条件的筛选渲染器
VxeUI.renderer.add('MyTableFilterComplex', {// 不显示底部按钮,使用自定义的按钮showTableFilterFooter: false,// 自定义筛选模板renderTableFilter(h, renderOpts, params) {return <FilterComplex params={params} />;},// 自定义重置数据方法tableFilterResetMethod(params) {const { options } = params;options.forEach((option) => {option.data = { type: 'has', name: '' };});},// 自定义筛选数据方法tableFilterMethod(params) {const { option, row, column } = params;const cellValue = row[column.field];const { name, type } = option.data;if (cellValue) {if (type === 'has') {return cellValue.indexOf(name) > -1;}return cellValue === name;}return false;}
})

创建文件筛选面板组件:src/plugins/vxe/filters/FilterComplex.vue

<template><div v-if="currOption" class="my-filter-complex"><div class="my-fc-type"><vxe-radio v-model="currOption.data.type" name="fType" label="has">包含</vxe-radio><vxe-radio v-model="currOption.data.type" name="fType" label="eq">等于</vxe-radio></div><div class="my-fc-name"><vxe-input v-model="currOption.data.name" class="my-fc-input" mode="text" placeholder="请输入名称" @input="changeOptionEvent()"></vxe-input></div><div class="my-fc-footer"><vxe-button @click="resetEvent">重置</vxe-button><vxe-button status="primary" @click="confirmEvent">确认</vxe-button></div></div>
</template><script>
export default {props: {params: {type: Object,default: () => ({})}},data () {return {currOption: null}},methods: {load () {const { params } = thisif (params) {const { column } = paramsconst option = column.filters[0]this.currOption = option}},changeOptionEvent () {const { params } = thisconst option = this.currOptionif (params && option) {const { $panel } = paramsconst checked = !!option.data.name$panel.changeOption(null, checked, option)}},confirmEvent () {const { params } = thisif (params) {const { $panel } = params$panel.confirmFilter()}},resetEvent () {const { params } = thisif (params) {const { $panel } = params$panel.resetFilter()}}},watch: {'params.column' () {this.load()}},created () {this.load()}
}
</script><style lang="scss" scoped>
.my-filter-complex {width: 260px;padding: 5px 15px 10px 15px;.my-fc-type {padding: 8px 0;}.my-fc-input {width: 100%;}.my-fc-footer {text-align: center;margin-top: 8px;}
}
</style>

src/main.js 中全局引入渲染器:

// ...
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...import './plugins/vxe/render'createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
// ...

然后使用

通过 filter-render={ name: ‘MyTableFilterComplex’ } 指定 name 就可以调用渲染器,其中 name 就是自定义的渲染器名称。

<template><div><vxe-tableborderheight="300":data="tableData"><vxe-column type="seq" width="50"></vxe-column><vxe-column field="name" title="Name" :filters="roleOptions" :filter-render="{name: 'MyTableFilterComplex'}"></vxe-column><vxe-column field="sex" title="Sex" :filters="sexOptions" :filter-render="{name: 'MyTableFilterComplex'}"></vxe-column><vxe-column field="age" title="Age"></vxe-column></vxe-table></div>
</template><script>
export default {data () {const tableData = [{ id: 10001, name: 'Test1', sex: 'Man', age: 28 },{ id: 10002, name: 'Test2', sex: 'Women', age: 22 },{ id: 10003, name: 'Test3', sex: 'Man', age: 32 },{ id: 10004, name: 'Test4', sex: 'Women', age: 23 }]const roleOptions = [{ data: { type: 'has', name: '' } }]const sexOptions = [{ data: { type: 'has', name: '' } }]return {tableData,roleOptions,sexOptions}}
}
</script>

在这里插入图片描述
在这里插入图片描述

https://gitee.com/xuliangzhan/vxe-table

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470365.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐一款好用的postman替代工具2024

Apifox 是国内团队自主研发的 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;是非常好的一款 postman 替代工具。 它通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好接口文档&#xff0c;接口调试、数据 Mock、接口…

MTSET可溶于DMSO、DMF、THF等有机溶剂,并在水中有轻微的溶解性,91774-25-3

一、基本信息 中文名称&#xff1a;[2-(三甲基铵)乙基]甲硫基磺酸溴&#xff1b;MTSET巯基反应染料 英文名称&#xff1a;MTSET&#xff1b;[2-(Trimethylammonium)ethyl]methanethiosulfonate Bromide CAS号&#xff1a;91774-25-3 分子式&#xff1a;C6H16BrNO2S2 分子量…

如何为电子课程创造创意

为电子课程创造一个想法&#xff0c;首先要深刻理解是什么让知识对学习者既相关又吸引人。第一步是专注于可以分解为可教部分的特定技能或专业领域。通常&#xff0c;人们从他们熟悉的东西开始&#xff0c;但真正的挑战在于将这些知识转化为一种可访问且引人入胜的学习体验。这…

安全生产管理的重要性:现状、痛点与改进之路

当前&#xff0c;安全生产管理已经成为企业管理中的关键环节&#xff0c;但现实中仍然存在诸多痛点。近年来&#xff0c;随着工业化和现代化的快速推进&#xff0c;企业在追求效益的同时&#xff0c;忽视安全管理的现象屡见不鲜。据统计&#xff0c;安全事故的发生频率仍然较高…

深度学习之 LSTM

1.1 LSTM的产生原因 ​ RNN在处理长期依赖&#xff08;时间序列上距离较远的节点&#xff09;时会遇到巨大的困难&#xff0c;因为计算距离较远的节点之间的联系时会涉及雅可比矩阵的多次相乘&#xff0c;会造成梯度消失或者梯度膨胀的现象。为了解决该问题&#xff0c;研究人…

机器学习基础02_特征工程

目录 一、概念 二、API 三、DictVectorize字典列表特征提取 四、CountVectorize文本特征提取 五、TF-IDF文本1特征词的重要程度特征提取 六、无量纲化预处理 1、MinMaxScaler 归一化 2、StandardScaler 标准化 七、特征降维 1、特征选择 VarianceThreshold 底方差…

Linux第四讲:Git gdb

Linux第四讲&#xff1a;Git && gdb 1.版本控制器Git1.1理解版本控制1.2理解协作开发1.3Git的历史1.4Git的操作1.4.1仓库创建解释、仓库克隆操作1.4.2本地文件操作三板斧1.4.3文件推送详细问题 2.调试器 -- gdb/cgdb使用2.1调试的本质是什么2.2watch命令2.3set var命令…

react的创建与书写

一&#xff1a;创建项目 超全面详细一条龙教程&#xff01;从零搭建React项目全家桶&#xff08;上篇&#xff09; - 知乎 1.创建一个文件夹&#xff0c;shift鼠标右键选择在此处打开powershell 2.为了加速npm下载速度&#xff0c;先把npm设置为淘宝镜像地址。 npm config s…

黄色校正电容102j100

1. 普通电容主要用于交流回路中的信号耦合或滤波。它们通常没有极性&#xff0c;容量较小&#xff0c;通常在几百皮法拉范围内。普通电容在电路中用于信号耦合或直流电路的电源滤波&#xff0c;而电解电容一般用于直流电路&#xff0c;容量较大&#xff0c;从几微法到数千微法…

DApp开发:定制化解决方案与源码部署的一站式指南

去中心化应用&#xff08;DApp&#xff09;随着区块链技术的发展&#xff0c;成为众多行业探索与创新的重要方向。无论是金融、供应链、游戏&#xff0c;还是社交和艺术市场&#xff0c;DApp都为传统业务模式带来了全新可能。然而&#xff0c;开发一款DApp并非易事&#xff0c;…

单元测试、集成测试、系统测试有什么区别

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 单元测试、集成测试、系统测试有什么区别 1、粒度不同 集成测试bai粒度居中&#xff0c;单元测试粒度最小&#xff0c;系统du测试粒度最大。 2、测试方式不同…

学Linux的第八天

目录 管理进程 概念 程序、进程、线程 进程分类 查看进程 ps命令 unix 风格 bsd风格 GNU风格 top命令 格式 统计信息区 进程信息区&#xff1a;显示了每个进程的运行状态 kill命令 作用 格式 管理进程 概念 程序、进程、线程 程序&#xff1a; 二进制文件&…

Xshell,Shell的相关介绍与Linux中的权限问题

目录 XShell的介绍 Shell的运行原理 Linux当中的权限问题 Linux权限的概念 Linux权限管理 文件访问者的分类&#xff08;人&#xff09; 文件类型和访问权限&#xff08;事物属性&#xff09; 文件权限值的表示方法 文件访问权限的相关设置方法 如何改变文件的访问权…

RS®SZM 倍频器

_XLT_ R&SSZM 倍频器 R&SSZM 系列倍频器在 50 GHz 至 170 GHz 的频率范围内具有简便的操作性和精确的输出电平。它们可用于多种应用&#xff0c;例如在汽车领域使用测距雷达&#xff0c;在天文学中使用精密望远镜&#xff0c;在雷达干涉测量中用于分析地球表面。 特…

Unity3D学习FPS游戏(11)敌人AI巡逻(NavMesh)

前言&#xff1a;前面两篇博客已经实现了简单的敌人&#xff0c;但是呢&#xff0c;这样很无趣。因为敌人只会站在原地被攻击&#xff0c;所以本篇我们将实现敌人AI巡逻&#xff0c;让敌人动起来。 敌人AI巡逻 场景丰富一下导航网格NavMesh构建导航网格导航网格优化玩家被当作…

去地面算法——depth_clustering算法调试(1)

1 源码下载 论文&#xff1a; 《2016-Fast Range Image-Based Segmentation of Sparse 3D Laser Scans for Online Operation》 《2017-Efficient Online Segmentation for Sparse 3D Laser Scans》 代码&#xff1a;git链接 2 问题记录 2.1 无法找到qt问题 问题截图&…

NUXT3学习日记一(在我git中拉取代码、文件讲解)

Nuxt 3 是一个基于 Vue 3 的现代框架&#xff0c;用于构建服务器端渲染&#xff08;SSR&#xff09;和静态生成的应用程序。它提供了一种简化的方式来创建高性能的 Vue 应用&#xff0c;具有许多强大的功能和优点。以下是 Nuxt 3 的一些主要应用和优点&#xff1a; 一、应用场…

vue3项目中内嵌vuepress工程两种实现方式

目录 一、示例二、创建vuepress工程三、配置vue项目的打包命令四、 通过iframe嵌套实现过程五、 将vue项目打包&#xff0c;启本地服务运行index.html 一、示例 vue项目&#xff0c;点击用户手册按钮&#xff0c;通过a标签跳转到vuepress框架搭建的页面。点击后者通过路由跳转…

简述 synchronized 和 java.util.concurrent.locks.Lock 的异同?

大家好&#xff0c;我是锋哥。今天分享关于【简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f;】面试题。希望对大家有帮助&#xff1b; 简述 synchronized 和 java.util.concurrent.locks.Lock 的异同&#xff1f; 在Java编程中&#xff0c;synchro…

centos7上安装mysql

1.现查看虚拟机上有没有wget包&#xff0c;如果没有的话进行安装 yum install -y wget 2.进入MySQL :: Download MySQL Yum Repository下载mysql安装源 找到与linux相应的版本&#xff0c;复制地址&#xff0c;如果找不到地址&#xff0c;可以复制如下 3.下载mysql官方yum源 …