ant-degin-vue的table表格点击修改按钮的时候,将将这个按钮相对应的行的数据存储到vuex中,然后form表单页面中从vuex中获取该行的数据,
时间: 2024-03-19 20:45:43 浏览: 71
可以通过以下步骤实现:
1. 在点击修改按钮时,触发一个方法,将该行数据存储到 Vuex 中。
```javascript
methods: {
handleEdit(row) {
this.$store.commit('setRowData', row); // 存储数据到 Vuex
this.$router.push('/form'); // 跳转到表单页面
}
}
```
2. 在 Vuex 中定义一个 state ,用于存储该行数据。
```javascript
state: {
rowData: {}
},
mutations: {
setRowData(state, data) {
state.rowData = data;
}
}
```
3. 在表单页面中,从 Vuex 中获取该行数据,并将其绑定到表单中。
```javascript
<template>
<el-form :model="formData">
<el-form-item label="姓名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age"></el-input>
</el-form-item>
<!-- 其他表单项 -->
</el-form>
</template>
<script>
export default {
computed: {
formData() {
return this.$store.state.rowData; // 从 Vuex 中获取该行数据
}
}
}
</script>
```
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://img-home.csdnimg.cn/images/20250102104920.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)