vue element编辑功能

1.编辑页面和添加页面一致 所以 就不用单独去写新的编辑静态页面
2-1：编辑事件

 // 编辑
       handleEdit(index, row) {
        console.log(index, row);
        // 存储当前行的数据 --vuex---跳转到另外一个界面--获取vuex行数据
        this.changeRowData()
        // 跳转编辑界面---
        this.$router.push('/product/add-product')
      },
1
2
3
4
5
6
7
8

2-2：创建一个product.js页面存储当前商品信息数据

// 存储当前的商品信息数据
export default{
    namespaced:true,
    // 它可以被看作是Vue组件中的data属性
    state:{
        rowData:{},//当前行的数据容器
    },
    // Mutation是修改State最直接的方法
    mutations:{
        changeRowData(state,payload){//payload参数
            state.rowData = payload
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2-3：在vuex页面导入这个页面并注册这个页面

import Vue from 'vue'
import Vuex from 'vuex'
import product from './modules/product'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  // 注册模块
  modules: {
    product,
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2-4：在编辑页面导入这个vuex

import {mapMutations} from 'vuex'
1

//从index页面把这个模块引进来这个方法

...mapMutations('product',['changeRowData']),
1

2-5：操作编辑跳转到新的页面

 // 编辑
       handleEdit(index, row) {
        console.log(index, row);
        // 存储当前行的数据 --vuex---跳转到另外一个界面--获取vuex行数据
        this.changeRowData(row)
        // 跳转编辑界面---
        this.$router.push('/product/addProduct-page')
      },
1
2
3
4
5
6
7
8

这个时候可以拿到添加页面了 ，下一步进行读数据，显示数据

2-6：读数据从添加页面用辅助函数读取，一加载页面就显示数据就使用到created
1、先导入vuex

import {mapState} from 'vuex'
1

2.使用辅助函数

 computed: {
        ...mapState('product', ['rowData', 'title'])
    },
1
2
3

3.进入页面就显示当前行数据（先在声明周期读）

 created(){
    this.ruleForm= this.rowData
   },
1
2
3

注意事项：
1.这个添加是动态的不能写死，点击添加就显示商品添加,点击编辑就是商品编辑
解决：
1.在vuex里边定义一个初始值title和一个定义一个title方法

// 存储当前的商品信息数据
export default{
    namespaced:true,
    // 它可以被看作是Vue组件中的data属性
    state:{
        rowData:{},//当前行的数据容器
        title:'添加',//标题
    },
    // Mutation是修改State最直接的方法
    mutations:{
        changeRowData(state,payload){//state:上方的数据; payload:参数
            state.rowData = payload
        },
        changeTitle(state,title){
            state.title = title ;//title等于任意形参
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.在编辑和添加直接赋值
1

  ...mapMutations('product',['changeRowData','changeTitle']),//从index页面把这个模块引进来这个方法
1

2.这个时候编辑能正常访问当前行数据但添加页面也出现当前行数据：那就根据title做一个判断 等于编辑的时候就显示数据

 computed: {
        ...mapState('product', ['rowData', 'title'])
    },
1
2
3

 created(){
    if(this.title == '编辑') {
      this.ruleForm= this.rowData
    }
   },
1
2
3
4
5

这个时候一般的都可以正常编辑了（除图片和富文本框不能）