avue-crud组件的行内编辑实现失焦保存,在没有右侧操作栏的情况下

前言

关于 avue 框架,其实本来不想写一篇随笔记录的,因为目前在网上有很多文章,关于其配置项介绍的比较详细,而且官网上也有对应的文档,这两者结合足以满足大部分的开发需求。

不过,产品经理总会有些不一样的需求,网上的配置项文档千篇一律,官网上的文档也不是特别完整,这时候就需要我们自己想办法。

1. 场景

看下图右侧表格,需要实现:最右边的【分配重量】列 行内编辑,且没有操作栏按钮

在这里插入图片描述

官网上倒是有关于行内编辑的介绍,不过都是建立在右侧有操作按钮的情况下。

在这里插入图片描述

分析:

如果原型中右侧有操作栏,那么就会变得很简单,直接在对应的按钮进行更新数据、校验即可,我也没有必要写这篇博客了。

在没有操作栏的情况下,我们该如何操作输入的数据?

点击下方的【确定】按钮,指定是不行的,而且里面还包含各种校验。

此时,我们首先想到的是:在鼠标失去焦点的时候,就对数据进行处理。

但 avue 官网上并没有关于 blulr 的介绍,需要我们自己写。

2. 代码实例

基本的配置项我就不多做描述,直接写核心部分的代码,因为项目架构是 Vue2


data() {
	return {
		option: {
			column: [
			    { label: '备注', align: 'center', prop: 'remark' },
          		{
            		label: '分配重量',
            		align: 'center',
            		width: '150',
            		prop: 'distributedWeight',
            		type: 'number',
            		min: 0,
            		cell: true,
            		blur: (value) => this.handleBlur(value)
          }
			]
		}
		data: [
			{
				orderNum: 1111111,
				orderDate: '2023-03-02',
				productName: 'xxxx',
				productCode: 'xxxx',
				couont: 20,
				weight: '500',
				remark: 'xxxx',
				$cellEdit: true
			},
			{
				orderNum: 1111111,
				orderDate: '2023-03-02',
				productName: 'xxxx',
				productCode: 'xxxx',
				couont: 20,
				weight: '500',
				remark: 'xxxx',
				$cellEdit: true
			}
		]
	}
},
methods: {
	handleBlur(value) {
		// 根据需要写相关逻辑
	}
}

解析:

首先,我们需要接口返回的数据,追加一个属性字段:$cellEdit: true,开启首次编辑。

其次,在 option 配置项中的 column 中,给需要进行编辑的列,配置属性:cell: true

最后,在 column 的对应列,添加上 失去焦点方法: blur: (value) => this.xxxx(value)

3. 总结

avue 官网上的配置项文档并不全面,很多属性都没有,比如我这次用到的 column 列的属性:cell、blulr,我在官网配置文档上并没有看到。可能是官网文档进行了升级,记得去年的时候官网配置项文档并不是如今这个样子,里面的配置项很多。

不过,想告诉大家的是:不要以为官网上没有该属性的介绍就真的没有,要勇于质疑,自己可以先写着试下,总归会发现新大陆的。

其次,avue 框架确实可以极大的提高开发者的效率,减少页面开发工作,但前提是你要熟悉 avue框架的各个配置项。因为它的配置项实在是太多了,如果不是太熟悉,真的不如使用 element 进行开发来的方便。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[大二下]什么是NPM

[大二下]什么是npm? 什么是NPM? 最简单来回答: ​ 就是一个包管理器, 一个仓库, 谁需要里面的物品, 谁就拿 npm 全称 Node Package(译: 包,包裹) Manager(译:如下). 直译过来就是 Node的包管理, 但是我们真正咱们约定俗成的称 NPM为"Node的包管理器". npm是Jav…

nvm使用-node版本切换-npm版本-node版本异常导致错误

目录什么是nvm?为什么要用它&#xff1f;它改变的是谁的版本号&#xff1f;安装并使用安装前操作安装使用&#xff08;常用命令&#xff09;nvm -hnvm install \<version\> [arch]nvm listnvm use [version] [arch]其他什么是nvm? .nvm是一个node的版本管理工具&#x…

【计算机图形学】扫面转换算法(DDA算法 中点画线算法 Bresenham画线算法)

模块1 扫描转换算法 一 实验目的 编写直线、弧线的光栅扫描转换算法&#xff0c;并对线宽与线形的算法加以探讨用DDA算法、中点画线算法、Bresenham画线算法绘制直线&#xff08;如果键盘输入数据&#xff0c;给出数据值&#xff1b;如果绘制图案&#xff0c;图案中应包含各种…

机器看世界

博主简介 博主是一名大二学生&#xff0c;主攻人工智能研究。感谢让我们在CSDN相遇&#xff0c;博主致力于在这里分享关于人工智能&#xff0c;c&#xff0c;Python&#xff0c;爬虫等方面知识的分享。 如果有需要的小伙伴可以关注博主&#xff0c;博主会继续更新的&#xff0c…

开源超级终端工具——WindTerm

1、下载和安装&#xff08;我的是win10&#xff0c;其他版本各位自选&#xff09; Releases kingToolbox/WindTerm GitHub 安装的话&#xff0c;相信大家不用我赘述了。 初始界面是这样的&#xff1a; 2、WindTerm使用 2.1 本地会话&#xff08;最下面那个框&#xff0c;发…

自动化测试实战篇(10),找不到合适接口测试怎么办?Postman中mock模拟接口帮你解决烦恼

一般想学习接口测试&#xff0c;找不到相应的接口进行测试也是比较麻烦的一件事情&#xff0c;尤其是找一些能够正常显示想要的相应的数据的接口更是相对来讲比较复杂&#xff0c;那么有没有简单点造接口数据的方式呢&#xff1f; 像是mock框架&#xff0c;以它为基础的apifox…

23.3.14打卡 2022年江西省大学生程序设计竞赛(正式赛)ABL

就写了签到, 其他题没写, 这场好像3题就银了 纪念一下3.14原粥率日 比赛链接:https://ac.nowcoder.com/acm/contest/43898 A题 Special Adjustment Method 题意 给出非负整数x, y, z 你可以让其中两个数字-1, 另外一个2, 使得x2y2z2x^2y^{2}z^{2}x2y2z2最大 题解 这题很容…

站上风口,文心一言任重道远

目录正式发布时机选择逻辑推理AI绘画用户选择总结自从OpenAI公司的chatGPT发布以来&#xff0c;吸引了全球目光&#xff0c;同时也引起了我们的羡慕&#xff0c;希望有国产的聊天机器人&#xff0c;盼星星盼月亮&#xff0c;终于等来了百度文心一言的发布。 正式发布 3月16日…

安全SaaS,在中国TO B中艰难成长

无论是一体化、还是以业务为中心专攻政企或金融客户&#xff0c;还是针对中小微企业市场推出免费产品&#xff0c;都可能成为未来安全SaaS规模化的发展路径。 作者|斗斗 编辑|皮爷 出品|产业家 5G、物联网、AI、云计算等技术的应用&#xff0c;让生产、服务过程加速数字化、…

Unity PS4/PS5开发环境搭建

首先&#xff0c;主机游戏PlayStation/Nintendo Switch都是比较闭塞的&#xff0c;开发者账号是必须的。 开发环境有两个部分&#xff0c;一是SDK Kit&#xff08;各种开发调试环境&#xff09;&#xff0c;二是Unity的支持库(安装后才能在Unity中切换到PS平台)&#xff1b; 需…

软件开发的权限系统功能模块设计,分享主流的九种常见权限模型

软件系统的权限控制几乎是非常常见且必备的&#xff0c;这篇文章整理下常见的九种模型&#xff0c;几乎基本够你用了&#xff0c;主流的权限模型主要有以下9种&#xff1a; 1、ACL模型 访问控制列表 2、DAC模型 自主访问控制 3、MAC模型 强制访问控制 4、ABAC模型 基于属性的访…

【数据结构】带头双向循环链表的实现

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;别人可以拷贝我的模式&#xff0c;但不能拷贝我不断往前的激情 &#x1f6f8;C语言专栏&#xff1a;https://blog.csdn.net/vhhhbb/category_12174730.html &#x1f680;数据结构专栏&#xff…

【JavaEE】前后端分离实现博客系统(后端实现)

写在前面 Hello&#xff0c;在上一篇中&#xff0c;我们已经实现了对于博客系统的页面构建任务。本次主要解决的问题就是针对这四个界面&#xff0c;实现后端的 servlet 程序&#xff0c;规范前后端交互的接口&#xff0c;编写客户端和服务端代码&#xff0c;处理请求并反馈。博…

响应式编程详解,带你熟悉Reactor响应式编程

文章目录一、什么是响应式编程1、Java的流和响应式流2、Java中响应式的使用3、Reactor中响应式流的基本接口4、Reactor中响应式接口的基本使用二、初始Reactor1、Flux和Mono的基本介绍2、引入Reactor依赖3、响应式类型的创建4、响应式类型的组合&#xff08;1&#xff09;使用m…

【C语言蓝桥杯每日一题】——数字三角形

【C语言蓝桥杯每日一题】—— 数字三角形&#x1f60e;前言&#x1f64c;数字三角形&#x1f64c;总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01;&#xff01;&#xff01; &#x1f60a…

QEMU启动ARM32 Linux内核

目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言 本文介绍采…

编译原理

文章目录绪论第1章 绪论1.什么是编译2.编译系统的结构3.词法分析第2章 语言及其文法字母表 ∑\sum∑概念终结符非终结符产生式文法Chomsky文法分类体系0型文法 &#xff08;Type-0 Grammar&#xff09;1型文法&#xff08;Type-1 Grammar&#xff09;2型文法&#xff08;Type-2…

JAVA开发与JAVA(一文学会使用ElasticSearch)

在web网站的架设中特别是数据量大的网站或者APP小程序需要搜索或者全文检索的场景&#xff0c;几乎都需要借助ElasticSearch来作为全文检索引擎&#xff0c;以提高网站的搜索效率和性能。 这一节&#xff0c;我们通过一篇文章介绍&#xff0c;使大家通过一文就学会使用Elastic…

python 函数:定义、调用、参数、返回值、嵌套、变量的作用域(局部变量、全局变量)、global、匿名函数lambda

函数可以将我们的程序分解成最小的模块&#xff0c;避免重复使用。函数内部的代码&#xff0c;只有被调用的时候才会执行。 函数的定义&#xff08;def就是define&#xff09;&#xff1a; 格式&#xff1a;def 函数名(): 函数封装的代码 函数的调用&#xff1a; 格式&…

大学生考研的意义?

当我拿起笔头&#xff0c;准备写这个话题时&#xff0c;心里是非常难受的&#xff0c;因为看到太多的学生在最好的年华&#xff0c;在自由的大学本应该开拓知识&#xff0c;提升认知&#xff0c;动手实践&#xff0c;不断尝试和试错&#xff0c;不断历练自己跳出学生思维圈&…
最新文章