elementui 按钮 表单_elementUI table 点击编辑按钮进行编辑实现示例

Demo

.el-table-add-row {

margin-top: 10px;

width: 100%;

height: 34px;

border: 1px dashed #c1c1cd;

border-radius: 3px;

cursor: pointer;

justify-content: center;

display: flex;

line-height: 34px;

}

{{scope.row[v.field]}}

{{scope.row.isSet?'保存':"修改"}}

删除

取消

+ 添加

//id生成工具 这个比用看 示例而已 模拟后台返回的id

var generateId = {

_count: 1,

get(){return ((+new Date()) + "_" + (this._count++))}

};

//主要内容

var app = new Vue({

el: "#app",

data: {

master_user: {

sel: null,//选中行

columns: [

{ field: "type", title: "远程类型", width: 120 },

{ field: "addport", title: "连接地址", width: 150 },

{ field: "user", title: "登录用户", width: 120 },

{ field: "pwd", title: "登录密码", width: 220 },

{ field: "info", title: "其他信息" }

],

data: [],

},

},

methods: {

//读取表格数据

readMasterUser() {

//根据实际情况，自己改下啊

app.master_user.data.map(i => {

i.id = generateId.get();//模拟后台插入成功后有了id

return i;

});

},

//添加账号

addMasterUser() {

for (let i of app.master_user.data) {

if (i.isSet) return app.$message.warning("请先保存当前编辑项");

}

let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };

app.master_user.data.push(j);

app.master_user.sel = JSON.parse(JSON.stringify(j));

},

//修改

pwdChange(row, index, cg) {

//点击修改 判断是否已经保存所有操作

for (let i of app.master_user.data) {

if (i.isSet && i.id != row.id) {

app.$message.warning("请先保存当前编辑项");

return false;

}

}

//是否是取消操作

if (!cg) {

if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);

return row.isSet = !row.isSet;

}

//提交数据

if (row.isSet) {

//项目是模拟请求操作 自己修改下

(function () {

let data = JSON.parse(JSON.stringify(app.master_user.sel));

for (let k in data) row[k] = data[k];

app.$message({

type: 'success',

message: "保存成功!"

});

//然后这边重新读取表格数据

app.readMasterUser();

row.isSet = false;

})();

} else {

app.master_user.sel = JSON.parse(JSON.stringify(row));

row.isSet = true;

}

}

}

});