ant-degin-vue的table表格点击修改按钮的时候,将将这个按钮相对应的行的数据存储到vuex中,然后form表单页面中从vuex中获取该行的数据,
时间: 2024-03-19 15:45:43 浏览: 57
vue用ant design中table表格,点击某行时触发的事件操作
可以通过以下步骤实现:
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>
```
阅读全文