ant design实现表格查询

最新推荐文章于 2024-06-10 01:58:08 发布
最新推荐文章于 2024-06-10 01:58:08 发布
阅读量2.9k 收藏 10
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43600588/article/details/107247811
版权
本文作者分享了在实现Ant Design表格查询功能时遇到的问题及解决过程，从简介到具体代码实现，解释了如何避免赋值错误并确保数据正确显示。
摘要由CSDN通过智能技术生成

ant design实现表格查询

简介

本文章主要是讲述本小白在实现查询表格的过程中的种种困难，最后终于实现了这个巨简单的功能，俺真的太难了！！！

表格查询功能简介

表格中有多条信息，通过搜索功能筛选出特定的某一条（或几条）信息，显示再表格中。

为什么踩坑了？

一开始我是将查询到的数据直接赋值给data，然后发现控制台一直在报错，大概内容是：data没有splice方法啥的，记不清了哈哈哈，后面无意中百度才发现给data赋值的时候必须要数组，否则就实现不了这个功能

代码实现

// An highlighted block

index.vue
<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      
      <search @onClick="Search" ref="search"></search>  //查询的按钮 子组件
      <a-button type="primary" style="margin-left:5px" @click="onReset">重置</a-button>  
     </a-card>
     //表格
      <a-table :columns="columns" :data-source="data"
最低0.47元/天 解锁文章
qq_43600588
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant-desgin Vue 中实现表格搜索功能
weixin_43841806的博客
10-09 6833
在Ant-desgin VUE 中实现表格搜索过滤 . 效果展示 功能实现 <template> <div> <a-row style="min-height: 0.9rem; font-size: 0.4rem;"> <a-col :span="1"><a-icon type="search"></a-icon> </a-col> <a-col :span="6">
Ant design-03 查找数据
m0_59214979的博客
12-28 454
本节： 在Ant design 框架中的，查找数据 1.输入框绑定要搜索的数据，按钮绑定点击事件，调用搜索功能。 2.表单绑定变量控制是否显示。注意搜索之后的表格，连接的是搜索之后的数据表。 3.变量的定义 4.搜索功能 ...
【Ant-Design-Vue】3、表格组件入门
最新发布
weixin_52938153的博客
06-10 591
Ant-Design-Vue 的 Table 组件用于展示结构化的数据，具有高度的灵活性和可定制性。它支持多种功能，包括分页、排序、筛选、行选择等。下面我们将通过几个示例来展示 Table 组件的基本用法。有时，我们需要在表格的某些单元格中显示自定义内容。可以通过属性来实现这一点。
ant design pro 获取form表单中的数据信息
runrun117的博客
03-25 2945
class TodoList extends Component { formRef = React.createRef(); //提交改派信息 在form之前的一个确定按钮 sendWorkSubmit = () =>{ this.formRef.current.validateFields().then(values=>{//获取对应form表单中的映射对应的参数信息 console.log('!!!!!!!!!!!!!!formRef=',values).
SpringBoot后端+Vue之AntDesignVue前端实现查询表格导出excel功能
CCYGGUVG的博客
06-08 4522
用的是阿里的com.alibaba.excel包，pom的依赖如下 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.1.6</version> </dependency> 涉及到前后端跨域问题看的是这篇
ant design table左侧_ant.design组件Table嵌套子表格
weixin_33831535的博客
12-30 782
import React, { Component } from 'react'import { Table } from 'antd';const dataSource = [{busi_name: "指标用户1103 ",prov_name: "西藏",task_id: 7911,item: [{busi_name: "指标用户1103 ",log_id: 8955,prov_name: ...
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', ...
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
txt文件上传ant design vue表格以及对表格文件的分列，预览行数等联动效果
05-28
实现点击上传txt文件，将txt文件上传至ant design vue组件库的table表格上进行显示 第一个表格：用于展示文件以及对文件的显示操作 第二个表格：用于接收第一个表格的列数据
vue3 antd table表格的增删改查（二）input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】
XSL_HR的博客
11-29 3595
vue3 + ant design vue + table 后台管理系统通过请求后端接口实现关键字搜索。纯前端实现关键字搜索，显然很简单，但是在项目中，一般都会编写与搜索相关的接口，将任务功能的实现分工，因此在有接口的情况下，我们也要学会如何使用接口来实现搜索。
react ant-design框架 基于hook 的表格分页查询
kola的博客
10-21 2717
之前用react的做的项目一直都是用class ,setState,componentDidMount ，componentDidUpdate ，componentWillUnmount 的写法，但从16.8以来，react新增了Hook特性，对于喜欢技术尝试我的来说，岂能不试一下新写法。 我们一般用react 的ant-design框架做后台管理系统，那么最常见的业务场景就是表格，查询，分页。西面我就拿最常用的一个例子和大家分享一下： 首先请看我们的界面： 上面是搜索条件，中间是表格，下面是分页。这个大
AntDesign 表格查询、过滤自动生成组件
aliluyahoho的专栏
09-25 292
在.js文件中加入以下公共组件，作者将组件放在/utils/method.js下。表格数据，自动生成过滤。的表格数据，自定义过滤。
react使用antdesign样式，按需引入的两种方式
weixin_43801836的博客
05-06 898
方法一 1. 使用yarn eject命令，把webpack配置文件暴露出来，可以修改脚手架的配置信息。 2. 安装插件：yarn add babel-plugin-import --save-dev 3. 修改配置文件，找到package.json文件，找到babel 在下面添加代码 "plugins": [ [ "import", { "libraryName": "antd", "style": "css"
【Ant Design Vue】高级查询搜索功能
weixin_38673922的博客
07-25 1135
a-tree-select
vue ant design自定义表头搜索
qq_42619759的博客
04-01 2078
<template> <a-table :dataSource="data" :columns="columns"> <!--下面这整个div都是设置每一列搜索的样式图标--> <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" style="paddi.
Ant Design of Vue表格前端筛选
q2724338648的博客
11-08 209
import tableFilterMixin from '@/mixins/tableFilterMixin' // 表格筛选。创建mixins/tableFilterMixin文件。
vue antd table表格的增删改查（三）input输入框根据关键字模糊查询【后台管理系统 使用filter与indexOf嵌套】
XSL_HR的博客
03-27 1519
vue antd table表格的增删改查（三）input输入框根据关键字模糊查询（使用filter和indeOf嵌套）
Ant Design Vue实现表格行的拖动
07-15
要在Ant Design Vue中实现表格行的拖动，你可以使用Ant Design Vue提供的Draggable组件。下面是一个示例，展示了如何使用Ant Design Vue实现表格行的拖动： 1. 首先，确保你已经安装了Ant Design Vue。你可以使用以下命令来安装它： ```bash npm install ant-design-vue@next ``` 2. 在你的Vue组件中引入所需的组件和样式： ```vue <template> <div> <a-table :columns="columns" :dataSource="dataSource"> <template #body="{ row, index }"> <draggable v-model="dataSource" :element="'tr'" :options="dragOptions"> <tr :key="index"> <td>{{ row.name }}</td> <td>{{ row.age }}</td> <td>{{ row.address }}</td> </tr> </draggable> </template> </a-table> </div> </template> <script> import { Table, Draggable } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; export default { components: { 'a-table': Table, draggable: Draggable, }, data() { return { columns: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ], dataSource: [ { key: 1, name: 'John', age: 28, address: 'New York' }, { key: 2, name: 'Alice', age: 32, address: 'London' }, { key: 3, name: 'Bob', age: 24, address: 'Paris' }, ], dragOptions: { animation: 200, handle: '.ant-table-row', }, }; }, }; </script> ``` 在上面的代码中，我们使用了Ant Design Vue的Table和Draggable组件。我们将Draggable组件包裹在表格行的模板中，以实现行的拖动。我们还定义了一些样式选项，例如动画效果和拖动的句柄。 这样，你就可以在Ant Design Vue中实现表格行的拖动了。根据你的需求，你可以自定义样式和行为，以满足你的项目需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值