{ label: '套餐分类', field: 'category', component: 'ApiSelect', componentProps: { mode: 'signle', api: listByStoreId, params: { storeId:'1658661661673361409' }, labelField: 'name', valueField: 'id', }, 页面中的动态参数storeId如何传递到这个组件中
时间: 2024-02-17 14:02:35 浏览: 40
你可以在组件的 componentProps 属性中添加一个函数,动态返回需要传递的参数。具体步骤如下:
1. 在 data 中定义 storeId 变量,如:
```
data() {
return {
storeId: '1658661661673361409',
form: {
category: ''
}
}
},
```
2. 在组件的 componentProps 中添加一个函数,获取 storeId 的值,如:
```
{
label: '套餐分类',
field: 'category',
component: 'ApiSelect',
componentProps: {
mode: 'single',
api: listByStoreId,
params: {
storeId: () => this.storeId
},
labelField: 'name',
valueField: 'id'
}
}
```
在 params 中,将 storeId 的值设为一个函数,这样每次调用 ApiSelect 组件时都会动态获取最新的 storeId 值。函数中的 this 指向当前组件实例。
3. 在表单提交时,将 storeId 的值更新为最新的值,如:
```
handleSubmit() {
this.form.storeId = this.storeId;
// 提交表单
}
```
这样就可以动态传递参数到 ApiSelect 组件中了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)