(vue)iView 点击编辑按钮后编辑当前行
点击前:
点击后:
第一部分:
<Table
ref="selection"
:columns="columns"
:data="tableData"
@on-selection-change="handleSelectChange"
>
</Table>
第二部分:
//表格
columns: [
{
type: "selection",
width: 60,
align: "center",
},
{
title: "标签",
key: "label",
align: "center",
render: (h, params) => {
if (params.row.$isEdit) {
return h(
"Select",
{
props: {
value: params.row.label,
transfer: true,
},
on: {
"on-change": (value) => {
params.row.label = value;
// this.tableData[params.index].label = value;
},
},
},
this.labelList.map((item) => {
return h(
"Option",
{
props: {
value: item,
},
},
item
);
})
);
} else {
return h("div", params.row.label);
}
},
},
{
title: "实体",
key: "entity",
align: "center",
render: (h, params) => {
if (params.row.$isEdit) {
return h("input", {
domProps: {
value: params.row.entity,
},
on: {
input: function (event) {
params.row.entity = event.target.value;
},
},
});
} else {
return h("div", params.row.entity);
}
},
},
{
title: "关系",
key: "relation",
align: "center",
//...同上
},
{
title: "描述",
key: "desc",
align: "center",
//...同上
},
{
title: "操作",
slot: "operation",
align: "center",
render: (h, params) => {
return h(
"div",
{
style: {
display: "flex",
"justify-content": "center",
"align-items": "center",
},
},
[
h(
"span",
{
props: {
type: "text",
size: "small",
},
style: {
color: "#fc3925",
margin: "0 10px",
},
on: {
click: () => {
if (params.row.$isEdit) {
this.saveRow(params.row);
} else {
this.editRow(params.row);
}
},
},
},
params.row.$isEdit ? "保存" : "编辑"
),
h(
"span",
{
props: {
type: "text",
size: "small",
},
style: {
color: "#fc3925",
margin: "0 10px",
},
on: {
click: () => {
this.deleteRow(params.row);
},
},
},
"删除"
),
]
);
},
},
],
第三部分:
//编辑
editRow(row, index) {
this.$set(row, "$isEdit", true);
},
//保存
saveRow(row, index) {
this.$set(row, "$isEdit", false);
},