element表格禁止输入_vue+elementui 表格弹框编辑当前行时无法显示内容

开发思路

表格展示当前行

点击当前行操作列“编辑”按钮时，将row内容赋值给弹框变量对象

弹框点击确认后，修改表格内容

再次点击“编辑”时，反显修改后的内容

问题及解决

示例源代码

编辑

确定

取消

export default {

data() {

return {

tableData: [{name: 'y',hobby: 'y'},{name: 'x'}],

dialogVisible:false,

formData: {

name: null,

hobby: null

},

formRules: {

name: [{reuired: true, message: '请输入姓名',trigger: 'change'}],

hobby: [{reuired: true, message: '请输入爱好',trigger: 'change'}],

},

index: null

}

},

methods: {

doEdit(row,index) {

this.dialogVisible = true

this.index = index

this.formData = row

},

doOk(formname) {

// 赋值

for(let k in this.formData) {

this.tableData[this.index][k] = this.formData[k]

}

//清空表格内容

this.$refs[formname].resetFields()

this.index = null

this.dialogVisible = false

},

doCancel(formname) {

//清空表格内容

this.$refs[formname].resetFields()

this.index = null

this.dialogVisible = false

}

}

}

当点击“编辑”时，row内容没有反显到弹框页面上( vue官网解释)

//赋值时，赋值了引用而不是具体的值，因为弹框确定的时候会清空值

//解决方式：赋值具体值

doEdit(row,index) {

this.dialogVisible = true

this.index = index

For(let k in row) {

This.formData[k] = row[k]

}

},

弹框确认后，表格内容置空了

//赋值时，赋值对象的属性原先没有，后加的属性无法刷新

//向对象中增加属性时，不能采用直接赋值的形式

//Vue官网解释：这是由于js的限制，导致VUE不能检测对象属性的添加或删除

//解决方式：增加initData方法，页面初始化时，添加全部属性

initData(){

Let addPro = {

Name: null,

Hobby: null

}

This.tableData = Object.assign({},addPro,this.tableData)

}