foreword
Regarding avuethe framework , I actually didn’t want to write an essay, because there are many articles on the Internet, which describe its configuration items in detail, and there are corresponding documents on the official website. The combination of the two is enough to meet most development needs.
However, product managers always have some different needs. The configuration item documents on the Internet are the same, and the documents on the official website are not particularly complete. At this time, we need to find a way by ourselves.
1. Scene
Look at the table on the right side of the figure below, which needs to be implemented: the rightmost [Distribution Weight] column is edited in the row , and there is no operation bar button
There are introductions about inline editing on the official website, but they are all based on the fact that there are operation buttons on the right.
analyze:
If there is an operation bar on the right side of the prototype, it will become very simple, just update the data and verify it directly on the corresponding button, and I don't need to write this blog.
How can we manipulate the entered data without an action bar ?
Click the [OK] button below, it is not allowed to specify, and it also contains various checks.
At this point, the first thing we think of is: when the mouse loses focus, process the data.
But there is no blulrintroduction , we need to write it ourselves.
2. Code example
I will not describe the basic configuration items, but directly write the code of the core part, because the project architecture is 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) {
// 根据需要写相关逻辑
}
}
Parse:
First, we need the data returned by the interface, add an attribute field: $cellEdit: true, and start the first edit.
Secondly, in the column in the option configuration item, configure the properties for the column that needs to be edited:cell: true
Finally, in the corresponding column of column, add the method of losing focus: blur: (value) => this.xxxx(value)
3. Summary
The configuration item documentation on the avue official website is not comprehensive, and many attributes are missing. For example, the attributes of the column column I used this time: cell, blulr , I did not see it on the official website configuration documentation. It may be that the official website documents have been upgraded. I remember that last year, the official website configuration item documents were not what they are today, and there were many configuration items in them.
However, what I want to tell everyone is: don’t think that if there is no introduction of this attribute on the official website , it really doesn’t exist. Be brave to question, you can write and try it first, and you will find the New World after all.
Secondly, the avue framework can indeed greatly improve the efficiency of developers and reduce the work of page development, but the premise is that you must be familiar with the various configuration items of the avue framework. Because it has too many configuration items, if you are not too familiar with it, it is really not as convenient as using element for development.