vxe-grid过滤列数据后，获取剩下的表格内容

最新推荐文章于 2024-05-30 11:37:20 发布
最新推荐文章于 2024-05-30 11:37:20 发布
阅读量1.5k 收藏
点赞数
分类专栏： vxe-table 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45939191/article/details/115342070
版权

获取过滤后表格内容

// 获取过滤列后的表格数据
this.$refs.xTable1.getTableData()

结果：显示了所有数据和过滤后的数据，不管是单列过滤，还是多列过滤，都是显示当前页面显示的数据
在这里插入图片描述

鸣拙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 el-table实现列筛选功能，控制列的显示和隐藏（简单粗暴）
weixin_48853103的博客
03-30 2845
vue3 el-table实现列筛选功能
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
Vue 过滤器filters及基本用法
11-27
1、示例代码 采用vue单文件组件，使用moment插件格式化日期 <template> <div> <h1>{{date | dateFormat}}</h1> </div> </template> [removed] import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { date: new Date() } }, filters: { dateFormat(
VUE学习(十九) vxe-table获取筛选后的数据内容
easyboot的专栏
01-10 3247
vxe-table功能强大，很好用，但是我想获取筛选后的数据内容，发现需要设置ref=“xTable”PrintListData就是最终筛选后的数据。
vxe-grid表格的排序功能
最新发布
weixin_46394325的博客
05-30 473
vxe-grid表格实现排序功能
vxe-table 列表过滤踩坑
IT博客技术分享
06-09 3795
就是把 过滤的数组 filters：数组里面的 label 和value 的值， 都变成一致的 label 值。注意： 多选如果遇到，后台返回的只有lab值， 无 value 值的情况同单选的处理方法一样，就不写了。注意：这里是因为后端返回的 sex 的id 和 value 的id 能对上所以能实现过滤功能。但是这个过滤输入值必须是跟列表的值必须一致才能查到，没做到模糊查询的功能，根据。过滤一种分为2种，当前的过滤列的类型值确定的和不确定的，选择后去过滤，当前这里又阔以分为2种，单选和多选。
备忘一下jvxetable的各种数据集获取方法
rocklee的专栏
07-05 1175
。
vxe-tablevue表格解决方案 v2.9.15
08-14
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代...
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
Vxe Table/Grid 单元格分组合并
08-14
Vxe Table/Grid 单元格分组合并
vxe-tablevue表格解决方案 v2.10.10
01-12
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、...
view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态
Miss_Liang的博客
11-23 869
view-design 组件库表格筛选条件联动保留前面筛选条件的高亮状态 问题：当第一个筛选条件选中，第二个筛选条件会联动变化，此时会导致整个 table 组件刷新，那么第一个筛选条件的高亮状态会被清除 解决思路 通过编辑组件库的 Table 组件相关的源码实现页面刷新之后，仍然能保留第一个筛选条件的高亮状态 实现思路 组件库的 table-head 组件里的 headRows 计算方法，会返回最新的表格列的配置数据。 当选中第一个筛选项时，会触发第二个筛选项数据的更新，此步操作的最后结果是
vue+elmentUi实现table列筛选动态展示功能
weixin_43933259的博客
11-03 2969
table列筛动态选展示功能的实现 前言： 用过elementUi的小伙伴都知道，用它配合vue来写前端页面是很爽的，在大多数情况下，直接拿过来使用就能满足产品需求。就拿table组件来说，从简单的表格展示到到复杂自定义，开发者把很多可能涉及到的场景都考虑了进来。但是细心的你可能会发现，在使用table组件的时候，行是动态加载的，很多的操作都是对行进行的，而列是在一开始使用的时候要展示哪些列就写死了，如果展示的列很多，就算使用了固定列啥的冻结，用户在操作的时候依然会有很多不便，那么能不能通过筛选操作动态的
vxe-table 表头放大镜搜索，回车快捷键筛选
黄-小智的博客
03-15 507
vxe-table 表头放大镜搜索，回车快捷键筛选。
Vue使用Vxe-table组件,动态设置table表头过滤信息:filters
ShA_QimA的博客
06-01 3443
1: 加工完数据之后, 代码里面找到该子段的filters并赋值. 可能存在问题, 根据索引取字段不太靠谱,后面如果页面字段调整也需要跟着调整。2: 将列v-if设置成数组的长度. 问题: 如果数据数据为空会导致改字段不显示 哈哈.通常情况下,表头的这些过滤备选信息我们是直接在页面里面写死的.
vxeTable 与 element-ui完成表格地区筛选
weixin_42202310的博客
09-20 528
对于后端分页的表格来讲，前端展示的只是一部分数据，这样的话筛选就要传入后台参数，让后台去数据库中查找复合条件的数据进行返回，于是我们需要对vxe-table进行一些配置。如上图所示，template 里面的input就是自定义内容，这里的传参比较奇特，由于是自定义插槽，并不需要列表，需要ageOptions的一个data属性进行传参。data 属性承载着选中的数据，根据vxe提供的示例，结合el-cascader 级联选择器对地区选择的支持，可以完成表格地区筛选的功能。,然后需要监听表格中的筛选确定操作，
vxe-table自定义表头搜索表格内容
m0_63223221的博客
07-11 1744
vxe-table自定义表头，根据文档可以使用插槽slot="header"进行实现。props接收父组件传给子组件的值，emit传值给父组件，父组件通过clickSearch事件接收父组件的值，更新表格数据。用的是pug模板语法，想了解这种写法的伙伴可以百度哦。
vxe-table 自定义排序筛选 后台排序筛选
qq_35011890的博客
04-07 3433
vxe-table 自定义排序筛选 后台排序筛选
vxe-table(vxe-grid)自定义模块：列头
成在坚持，贵在坚持
11-18 8932
自定义列头模块 文档官网：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install 在列头上，有时候显示的title信息并不能满足我们想要显示的内容，这个时候查看文档，发现了自定义模块，使用插槽可以帮助我们实现自定义模板内容 使用slots 在插槽内容可以自定义模板，用css设置显示的样式 <template> <div> <vxe-grid border show-overflow
vxe-grid 表格显示数据
08-18
要使用 vxe-grid 表格来显示数据，你需要按照以下步骤进行操作： 1. 首先，在你的项目中安装 vxe-table 包。你可以使用 npm 或 yarn 命令行工具来安装它。例如，运行以下命令来安装 vxe-table： ``` npm install vxe-table ``` 2. 在你的代码中引入 vxe-grid 组件。你可以在需要使用的组件中添加以下代码： ```javascript import 'vxe-table/lib/style.css' import { Grid } from 'vxe-table' export default { components: { 'vxe-grid': Grid }, // ... } ``` 3. 在模板中使用 vxe-grid 组件来显示数据。你可以在模板中添加以下代码： ```html <vxe-grid :data="tableData" :columns="tableColumns"></vxe-grid> ``` 上面的代码中，`tableData` 是你的数据数组，`tableColumns` 是你的列配置数组。你需要根据你的实际数据和列配置进行相应的调整。 4. 在你的 Vue 实例中，定义 `tableData` 和 `tableColumns` 数据。`tableData` 是一个包含你的表格数据的数组，而 `tableColumns` 则是一个包含列配置的数组。例如： ```javascript export default { data() { return { tableData: [ { id: 1, name: 'John Doe', age: 25 }, { id: 2, name: 'Jane Smith', age: 30 }, // ... ], tableColumns: [ { field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'age', title: 'Age' }, // ... ] } }, // ... } ``` 上面的代码中，`tableData` 数组中的每个对象代表一行数据，而 `tableColumns` 数组中的每个对象定义了每列的字段和标题。 以上就是使用 vxe-grid 表格来显示数据的基本步骤。你可以根据 vxe-table 的文档进一步了解和调整表格的功能和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值