table定义:
<Table height="385" border :columns="fieldDetailColumns1" :data="fieldDetailList1" ></Table>
data中写上:
data() {
let t = this;
return {
fieldDetailList1: [],
fieldDetailColumns1: [
{
title: "字段英文名",
align: "left",
width: 120,
key: "colEnName"
},
{
title: "字段中文名",
align: "center",
width: 120,
key: "colCnName",
render: (h, params) => {
return h("Input", {
props: {
value: params.row.colCnName
},
domProps: {
title: params.row["colCnName"]
},
on: {
"on-blur": event => {
t.fieldDetailList1[params.index].colCnName =
event.target.value;
}
}
});
}
},
{
title: "是否主键",
width: 100,
align: "center",
key: "ifKey",
render: (h, params) => {
return h(
"Select",
{
props: {
value: params.row.ifKey
},
on: {
"on-change": event => {
t.fieldDetailList1[params.index].ifKey = event;
}
}
},
[
h(
"Option",
{
props: {
value: "Y"
}
},
"是"
),
h(
"Option",
{
props: {
value: "N"
}
},
"否"
)
]
);
}
}
]
};
}
使用时,fieldDetailList1即会自动更新为输入的数据。
关键是input的on-blur事件和select的on-change事件,以作记录。