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

谁借莪１个温暖的怀抱￠ 2024-03-25 16:43 15阅读 0赞

## 前言 ##

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

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

## 1. 场景 ##

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

![在这里插入图片描述][1ff2c902e4dd4007a98e57eab69da204.png]

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

![在这里插入图片描述][de0d4289a8b14450a8772169470d0a07.png]

**分析：**

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

在没有操作栏的情况下，我们**该如何操作输入的数据？**

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

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

但 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 进行开发来的方便。

[1ff2c902e4dd4007a98e57eab69da204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3922b8eef72340eabd602a0edfaaa788.png
[de0d4289a8b14450a8772169470d0a07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4aeb0a08c3b042d08e0bde8c208dc01e.png