ant-degin-vue的table表格点击修改跳转到对应的form表单页面进行修改,在点击表格行的时候,将该行的数据存储到 Vuex 中,然后在表单页面中从 Vuex 中获取该行数据。具体操作
时间: 2024-03-19 13:45:03 浏览: 47
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
首先,在点击表格行时,可以通过 `@row-click` 或者 `@cell-click` 事件来获取到该行的数据,然后将该数据存储到 Vuex 中。具体代码如下:
```javascript
// 在表格组件中
<template>
<el-table :data="tableData" @row-click="handleRowClick">
<!-- 表格列 -->
</el-table>
</template>
<script>
export default {
methods: {
handleRowClick(row) {
// 将点击的行数据存储到 Vuex 中
this.$store.commit('setSelectedRow', row)
// 跳转到表单页面
this.$router.push('/form')
}
}
}
</script>
```
在 Vuex 中,定义 `setSelectedRow` mutation,用来存储选中的行数据:
```javascript
// 在 store/index.js 中
export default new Vuex.Store({
state: {
selectedRow: null
},
mutations: {
setSelectedRow(state, row) {
state.selectedRow = row
}
}
})
```
然后,在表单页面中,从 Vuex 中获取选中的行数据,用来进行表单的初始化。具体代码如下:
```javascript
// 在表单组件中
<template>
<el-form :model="form" ref="form">
<!-- 表单项 -->
</el-form>
</template>
<script>
export default {
computed: {
form() {
// 从 Vuex 中获取选中的行数据
return this.$store.state.selectedRow
}
},
mounted() {
// 在表单项初始化完成后,将选中的行数据赋值到表单项上
this.$nextTick(() => {
this.$refs.form && this.$refs.form.setFieldsValue(this.form)
})
}
}
</script>
```
这样,在点击表格行时,就可以将该行的数据存储到 Vuex 中,并在表单页面中从 Vuex 中获取该行数据来进行表单的初始化。
阅读全文