任意行.png
<div>
<el-table :data="form.parents" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column
v-for="(v,i) in studentForm.columns"
:key="i"
:prop="v.field"
:label="v.title">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="请输入内容" v-model="studentForm.sel[v.field]">
</el-input>
</span>
<span v-else>{{scope.row[v.field]}}</span>
</template>
</el-table-column>
<el-table-column fixed="right" align="center" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" @click="parentChange(scope.row,scope.$index,true)">
{{scope.row.isSet?'保存':"修改"}}
</el-button>
<el-button size="mini" v-if="!scope.row.isSet" @click="removeMsg(scope.row,scope.$index)">删除</el-button>
<el-button v-else size="mini" @click="parentChange(scope.row,scope.$index,false)">取消</el-button>
</template>
</el-table-column>
</el-table>
<div class="neizhi-dialog" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
</div>
data:
studentForm: {
sel: null,//选中行
columns: [
{ field: "name", title: "名字",},
{ field: "relationship", title: "关系" },
{ field: "parentMobile", title: "家长手机"},
{ field: "parentWechat", title: "微信号" },
],
data: [],
},
methods:
//嵌套的 Dialog读取表格数据
readMasterUser() {
//根据实际情况，自己改下啊
this.form.parents.map(i => {
i.isSet=false;//给后台返回数据添加`isSet`标识
return i;
});
},
//嵌套的 Dialog添加
addMasterUser() {
for (let i of this.form.parents) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
let j = {"name": "", "relationship": "", "parentMobile": "", "parentWechat": "", "isSet": true};
this.form.parents.push(j);
this.studentForm.sel = JSON.parse(JSON.stringify(j));
},
//嵌套的 Dialog修改
parentChange(row, index, cg) {
//点击修改 判断是否已经保存所有操作
for (let i of this.form.parents) {
if (i.isSet && i.id != row.id) {
this.$message.warning("请先保存当前编辑项");
return false;
}
}
//是否是取消操作
if (!cg) {
if (!this.studentForm.sel.id) this.form.parents.splice(index, 1);
return row.isSet = !row.isSet;
}
//提交数据
if (row.isSet) {
//项目是模拟请求操作 自己修改下
let self = this;
(function () {
let data = JSON.parse(JSON.stringify(self.studentForm.sel));
for (let k in data) row[k] = data[k];
// self.$message({
// type: 'success',
// message: "保存成功"
// });
//然后这边重新读取表格数据
self.readMasterUser();
row.isSet = false;
})();
} else {
this.studentForm.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
}
},
//嵌套的 Dialog删除
removeMsg(a,index) {
this.form.parents.splice(index, 1)
},
以上是自己改的，下面是COPY度娘的
<!--表格编辑--1.不限制行数修改，2.根据返回值确定列-->
<template>
<div id="this">
<el-row>
<el-col :span="24">
<el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column v-for="(v,i) in master_user.columns" :key="i" :prop="v.field" :label="v.title" :width="v.width">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
</el-input>
</span>
<span v-else>{{scope.row[v.field]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
{{scope.row.isSet?'保存':"修改"}}
</span>
<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="removeMsg(scope.row,scope.$index)">
删除
</span>
<span v-else class="el-tag el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
取消
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default{
data() {
return{
_count: 1,
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: {
//id生成工具 这个不用看 示例而已 模拟后台返回的id
get(){return ((+new Date()) + "_" + (this._count++))},
//读取表格数据
readMasterUser() {
//根据实际情况，自己改下啊
this.master_user.data.map(i => {
i.id = this.get();//模拟后台插入成功后有了id
i.isSet=false;//给后台返回数据添加`isSet`标识
return i;
});
},
//添加账号
addMasterUser() {
for (let i of this.master_user.data) {
if (i.isSet) return this.$message.warning("请先保存当前编辑项");
}
let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
this.master_user.data.push(j);
this.master_user.sel = JSON.parse(JSON.stringify(j));
},
//修改
pwdChange(row, index, cg) {
//点击修改 判断是否已经保存所有操作
for (let i of this.master_user.data) {
if (i.isSet && i.id != row.id) {
this.$message.warning("请先保存当前编辑项");
return false;
}
}
//是否是取消操作
if (!cg) {
if (!this.master_user.sel.id) this.master_user.data.splice(index, 1);
return row.isSet = !row.isSet;
}
//提交数据
if (row.isSet) {
//项目是模拟请求操作 自己修改下
let self = this;
(function () {
let data = JSON.parse(JSON.stringify(self.master_user.sel));
for (let k in data) row[k] = data[k];
self.$message({
type: 'success',
message: "保存成功!"
});
//然后这边重新读取表格数据
self.readMasterUser();
row.isSet = false;
})();
} else {
this.master_user.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
}
},
//删除
removeMsg(a,index) {
this.studentForm.data.splice(index, 1)
},
}
}
</script>
<style>
.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;
}</style>
网友评论