Avue中的表格选择器内的onload({page,value,data})中的data保存并传递给保存按钮的row中
时间: 2024-03-01 13:49:55 浏览: 57
在 Avue 中的表格选择器(avue-crud-select)中,可以在选择器中选中数据后,将选择的数据保存到父组件中的表格中。在保存数据时,可以将选择器中选中的数据传递给保存按钮所在的行(row)中,从而将选择的数据与表格中的数据进行合并。
具体实现方式如下:
1. 在父组件中定义一个数组,用于存储表格中的数据:
```
<template>
<div>
<avue-crud-select
v-model="selectValue"
:api="api"
:columns="columns"
:onload="onload"
:multiple="true"
></avue-crud-select>
<avue-table :data="tableData" :columns="columns"></avue-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格中的数据
selectValue: [] // 选择器中选中的数据
};
},
// ...
}
</script>
```
2. 在 onload 方法中,将选择器中选中的数据保存到 selectValue 变量中:
```
function onload({ page, value, data }) {
this.selectValue = data;
}
```
3. 在保存按钮的点击事件中,将选择器中选中的数据与表格中的数据合并,并更新表格的数据:
```
function onSave(row) {
// 将选择器中选中的数据与表格中的数据合并
row.column1 = this.selectValue.map(item => item.column1).join(',');
row.column2 = this.selectValue.map(item => item.column2).join(',');
// 更新表格的数据
this.tableData = [...this.tableData];
}
```
在 onSave 方法中,可以根据需要对选择器中的数据进行处理,然后将处理后的数据与表格中的数据合并。在合并数据时,需要将表格中的数据复制一份,然后更新表格的数据,以触发 Avue 的响应式更新机制。
需要注意的是,如果选择器中可以选择多条数据,那么 selectValue 变量将是一个数组,需要根据实际情况进行处理。另外,如果选择器中的数据与表格中的数据的字段名不同,需要根据实际情况进行调整。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)