实现导入功能主要还是使用 Ant Design Vue 中的 upload 样式组件 一) 前端实现这段代码中 a-upload 标签实在你项目中引入了 Ant Design Vue UI库的支持下使用的一个导入组件accept 中这段代码表示你导入时所选文件只支持 excel 导入【.xlsx 或 .xls 都支持】customRequest 表示自定义方法代替默认方法去实现文件导入/上传操作@
Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中，官方提供了一个Table 表格组件。我们先来介绍一下这个组件Table 表格组件https://vue.ant.design/components/table-cn基础用法 分页组件，部分字段高亮特殊显示等等。详细使用请查阅文档。筛选排序 当然也可以在列表上方做常规搜索，会在后面的S-Table组件中进
转载
2024-04-25 14:50:48
743阅读
Antd Vue 组件库之Table表单 Table 表格展示行列数据。何时使用当有大量结构化的数据需要展现时；当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。如何使用指定表格的数据源 dataSource 为一个数组。代码演示Name GenderEmailCandelária Cardosofemalecandelaria.cardoso@e
转载
2024-05-06 19:58:36
350阅读
1.获取数据首先，数据自然是tree结构的，这中间自然会有一些对数据的处理，说一下常用处理：将扁平化数据处理为tree结构数据 将数据的属性处理为组件要求的属性解决该组件的一些问题，优化 1.将数据的属性处理为组件要求的属性 使用组件提供的该属性:replaceFields="{ key:'id',title:'name',child
转载
2024-03-27 11:52:05
523阅读
一、 MVVM 模式Vue.js 比较显著的特征是解耦了视图和数据，也就是说视图的变化不再需要命令式编程去显式改变，只要修改完数据就能立即自动同步，这是比较大的一个思维模式的转变，另一个就是组件化思维俯首皆是，这样开发一个应用就相当是在搭积木。其实以上对 Vue.js 所阐述的优点也正是 MVVM 模式的写照，它原是由 MVC 所衍生，即当视图层发生变化时，会自动更新到视图模型上，反之亦
转载
2024-10-09 15:26:47
85阅读
文章目录1.案例部分代码2. 简述3.案例代码1.案例部分代码 <a-table :colum
原创
2022-09-07 06:52:19
771阅读
学习vue3之useTable封装 在学习vue3中，极致的hook封装，业务与视图分离已经成为趋势。 于是试着封装成适用于自己项目的通用型useTable，视图使用elementPlus的el-table和el-pagination,视图不做过多赘述。1.开写代码之前需要先理清楚产物由于项目是后台项目，主要有【查询区域】、【表格】、【分页】三部分组成，根据这三部分，可以梳理出如下产物1.1 【查
文章目录1 介绍2 TODO3 特性4 预览5 代码详细说明5.1 设计vuex的存储结构并编写相关工具函数5.2设置路由文件5.3 编写容器页面 1 介绍该工程是基于vue的动态路由案例，复用一个组件，打开多个tab标签页，实现商品类组件复用，可以多tab打开2 TODO3 特性 复用组件多tab打开 刷新动态路由页面不丢失 支持路由传参 修复刷新时，动
上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！首先实现效果如下，觉得菜单还是比较nice的是吧：这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多叉树的知识，后续我会另外写一篇文章详细讲解，这里讲下前端。数据可以先构造json使用，这里用到的格式大概如下,以childList来嵌套子菜单：{
转载
2024-10-08 06:38:53
228阅读
问题：移动设备上的触摸事件：touchstart、touchmove、touchend如何利用它们三个来处理点击、长按、滑动等操作，以及如何在测试用例中模拟它们的操作参考了：移动设备的点击优化参考了MUI//感谢！！！解决使用vue自定义指令来干这件事touchstart来记录开始点击的位置和时间，并在这里边判断 长按 操作touchend来确定结束点击的位置和时间，来区分 点击 操作以及 不同方
一. 场景UI框架：“ant-design-vue”: “^2.1.3”如下图，点击红色框中的图标时，所有的数据根据当前点击的内容进行升降排序。二. 实现2.1 如果是前端实现排序// 表格列的配置描述
const columns = [
...
{
title: '实验名称',
key: 'abName',
slots: { customRender: 'abName' },
转载
2024-03-17 00:11:15
1549阅读
常规情况下, 我们要想选中一条数据, 需要点击该行行首的复选框, 无奈复选框稍小, 因此想要实现如题功能, 用的是这款ui框架, 主要看它的样式都比较好看, 和elementui很相像, 不知道谁模仿谁, 感觉这个做的好一点而且提供了一套中后台权限管理系统模板. 但是有些功能 比如这个点击行进行选中, 没有很方便的在官网文档介绍中找到设置方法, 但是找到后感觉还是挺简单的( 毕竟是做后台的… 刚入
转载
2024-04-03 08:30:23
524阅读
防止表单重复提交 介绍了使用 redirect 技术防止表单提交，但是 redirect 解决不了后退到表单页面时重复提交表单，为了解决这个问题，加入了 token 的机制。如果每个 form 相关的处理方法中都写一遍 token 的生成和校验代码，在实际项目中是不太能接受的，接下来介绍了使用拦截器的方式生成和校验 token。
1. 常规防止表单重复提交流程： GE
1.创建最基本的vue格式利用v快捷键 2.在组件库中复制前端标签修改或删掉多余的部分 3.开始编写table的列信息和内容 添加语言配置，和setup语法糖，加入引用import { ref, onMounted, h, computed } from 'vue'
import request from '@/tools/request'
import
原理： 合并指定字段，按行遍历，相同的地方rowSpan设为0，第一行设为n（n行重复）；table代码：<a-table :columns="methodColumns" :data-source="PreData(methodData,1)" bordered></a-table>PreData里的参数：methodData为数据源，1为要合并的列顺序，目前的方法只可以
转载
2024-03-20 13:08:16
800阅读
搜索表格数据，模糊清空空格包含搜索
原创
2022-10-18 10:36:31
999阅读
Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建Ant Design Pro of Vue下载安装启动步骤：一、Ant Design Pro of Vue 的介绍Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升
转载
2024-04-26 11:08:13
259阅读
开发模式预览 demo在开发一个 ui 组件库时，肯定需要一边预览 demo，一边修改代码。常见的解决方案是像开发一般项目一样使用 webpack-dev-server 预览组件，比如通过 vue-cli 初始化项目，或者自己配置脚本。文艺一点儿地可能会用到 parcel 来简化 demo 的开发配置（比如 muse-ui）。展示文档作为一个 ui 组件库，也肯定要有自己的组件展示文档。一般业界常
转载
2024-03-04 17:08:29
96阅读
今天开发需求的时候，用到了ant design中的table组件，其中遇到一些困难，虽然ant design官网给出了很详细的使用说明，但往往还是需要进行改动，谁让需求总是不按套路出牌的。于是乎，有了一个想法：把自己开发中遇到和ant design插件相关的知识来个汇总，自己以后开发也不会再遇到类似的问题犯难，也希望对其他网友有所帮助。一、Table 组件1、想要自定义表格的文本信息，比如，想
转载
2024-04-22 20:37:30
317阅读
之前一直是用elelement-ui实现树形图，现在需求需要修改为antd UI组件实现，在开发过程中出来了好几个坑，记录一下。 首先看一下要实现的效果： 1、可拖拽； 2、点击节点高亮，且点击请求当前节点对应的数据； 3、默认树形图的第一个节点高亮，且请求第一个节点的数据； 4、每个节点右侧需要一个添加的icon用来添加同级/子级节点；1、可拖拽【坑：】需要写onDrop方法 根据官网上的拖拽示
转载
2024-04-07 13:56:24
804阅读
