<Table :columns="columns1" :data="wtTableData"></Table>
data(){
return {
editIndex: -1,
editName: "",
editStartTime: "",
editEndTime: "",
columns1: [
{
title: "代理人",
key: "TOUSERNAME",
width: "200px",
render: (h, { row, index }) => {
let edit;
if (this.editIndex === index) {
this.editName = row.TOUSERNAME;
let _this = this;
edit = [
// h("Input", {
// props: {
// value: row.TOUSERNAME
// },
// on: {
// input: val => {
// this.editName = val;
// }
// }
// }),
h(
"Select",
{
props: {
value: row.TOUSERNAME,
transfer: true
},
on: {
"on-change": val => {
this.editName = val;
}
}
},
_this.treeData.map(item => {
return h(
"Option",
{
props: {
value: item.userName
}
},
item.userName
);
})
)
];
} else {
edit = row.TOUSERNAME;
}
return h("div", [edit]);
}
},
{
title: "开始时间",
key: "STARTTIME",
render: (h, { row, index }) => {
let edit;
if (this.editIndex === index) {
this.editStartTime = row.STARTTIME;
edit = [
h("Input", {
props: {
value: row.STARTTIME
},
on: {
input: val => {
this.editStartTime = val;
}
}
})
];
} else {
edit = row.STARTTIME;
}
return h("div", [edit]);
}
},
{
title: "结束时间",
key: "ENDTIME",
render: (h, { row, index }) => {
let edit;
if (this.editIndex === index) {
this.editEndTime = row.ENDTIME;
edit = [
h("Input", {
props: {
value: row.ENDTIME
},
on: {
input: val => {
this.editEndTime = val;
}
}
})
];
} else {
edit = row.ENDTIME;
}
return h("div", [edit]);
}
},
{
title: "操作",
render: (h, { row, index }) => {
if (this.editIndex === index) {
return h(
"div",
{
style: {
display: "flex",
"justify-content": "space-around",
"align-items": "center"
}
},
[
h(
"Button",
{
props: { type: "success" },
style: {
width: "45%",
display: "flex",
"justify-content": "center",
"align-items": "center"
},
on: {
click: async () => {
// this.data[index].name = this.editName;
// this.data[index].email = this.editEmail;
// this.data[index].status = this.editStatus;
this.editIndex = -1;
let params = {
rolename: this.editName,
starttime: this.editStartTime,
endtime: this.editEndTime,
id: row.ID,
touserid: "d40ac7fe-9696-40b6-a302-01df4153ab47"
};
let res = await postConfig(params);
if (res.status == 200) {
this.$Message.success("保存成功");
this.reshData();
}
}
}
},
"保存"
),
h(
"Button",
{
props: { type: "error" },
style: {
width: "45%",
display: "flex",
"justify-content": "center",
"align-items": "center"
},
on: {
click: async () => {
this.editIndex = -1;
}
}
},
"取消"
)
]
);
} else {
return h(
"div",
{
style: {
display: "flex",
"justify-content": "space-around",
"align-items": "center"
}
},
[
h(
"Button",
{
props: { type: "primary" },
style: {
width: "45%",
display: "flex",
"justify-content": "center",
"align-items": "center"
},
on: {
click: () => {
this.editName = row.name;
this.editEmail = row.email;
this.editStatus = row.status;
this.editIndex = index;
}
}
},
"编辑"
),
h(
"Button",
{
props: { type: "error" },
style: {
width: "45%",
display: "flex",
"justify-content": "center",
"align-items": "center"
},
on: {
click: async () => {
let res = await revoke();
if (res.status == 200) {
this.$Message.success("成功撤销授权");
this.reshData();
}
}
}
},
"撤销"
)
]
);
}
}
}
],
}
}
iview表格自定义编辑当前行
最新推荐文章于 2023-09-26 18:22:01 发布
该博客展示了如何使用Vue.js实现表格中的单元格编辑功能,包括代理人、开始时间和结束时间字段。用户可以点击编辑按钮激活编辑模式,通过Input和Select组件修改数据,并通过保存或取消操作确认或撤销更改。保存时,数据会通过POST请求更新到服务器。
摘要由CSDN通过智能技术生成