先上效果图：
上代码：
{
title: '姓名',
key: 'name',
render: (h, params) => {
if (params.row.$isEdit) {
return h('Input', {
props: {
type: "text",
value: params.row.name
},
on: {
"on-blur": event => {
debugger
params.row.name = event.target.value;
this.$set(params.row, '$isEdit', false);
},
}
});
} else {
return h('div', {
on: {
click: () => {
this.$set(params.row, '$isEdit', true);
},
}
},params.row.name);
}
}
},
使用iviewrender函数既可以实现，点击的时候更改标识符的状态。但是这种只是实现展示的数值改变，要实现table绑定的data值改变还需加上代码：
<template>
<div>
<Table border :columns="columns5" :data="data5"></Table>
</div>
</template>
.......
return h('Input', {
props: {
type: "text",
value: params.row.name
},
on: {
"on-blur": event => {
debugger
params.row.name = event.target.value;
this.data5[params.index].name = event.target.value;
this.$set(params.row, '$isEdit', false);
},
}
});
这样就能实现点击更改单元格的效果了，但是，需要表单验证怎么办呐？
如果用的是iview 3.0版本，可以参考https://dev.iviewui.com/articles/1040179759335739392 ，
而笔者当时使用的iview 2.0版本，没有slot-scope属性，故而笔者用了span标签实现的，上代码：
data5: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
date: '2016-10-03',
valid:""
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
date: '2016-10-01',
valid:""
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
date: '2016-10-02',
valid:""
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
date: '2016-10-04',
valid:""
}
]
给table绑定的data加上虚拟字段valid，
render: (h, param) => {
let vm = this;
return h(
"div",
{
props: {}
},
[
h("Input", {
props: {
type: "text",
value: param.row.name
},
on: {
"on-blur": event => {
//判断输入框是否为空，为空的话虚拟字段变成“不能为空”
if(event.target.value == ""){
this.data5[param.index].valid = "不能为空";
}else{
//不为空，即通过验证，将值附上去，然后把虚拟字段置空
params.row.name = event.target.value;
this.data5[param.index].name = event.target.value;
this.data5[param.index].valid = "";
}
},
}
}),
h(
"span",
{
attrs: {
title: param.row.valid
},
style: {
color: "red"
}
},
param.row.valid
)
]
);
},
在render函数中加上input框的判断与下面的span验证文字，这样的话一旦为空，即可实现效果：
样式方面可以自己调整，如果需要上面的点击效果，加上上面的判断代码即可