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