<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-table border :columns="columns2" :data="data3"></i-table>
</div>
<script>
var app = new Vue({
el: \'#app\',
data () {
return {
columns2: [
{
width: 60,
align: \'center\',
render: (h, params) => {
return h(\'Checkbox\', {
props: {
value: params.row.$isEdit,
},
on: {
\'on-change\': function (state) {
console.log(state);
//不用iview table自带的CheckBox 自己重构一个 点击赋值
params.row.$isEdit = state
}
}
});
}
},
{
title: \'Name\',
key: \'name\'
},
{
title: \'Age\',
key: \'age\',
render: (h, params) => {
if (params.row.$isEdit) {
return h(\'input\', {
domProps: {
value: params.row.age
},
on: {
input: function (event) {
params.row.age = event.target.value
}
}
});
} else {
return h(\'div\', params.row.age);
}
}
},
{
title: \'Address\',
key: \'address\'
},
{
title: \'Action\',
key: \'action\',
render: (h, params) => {
return h(\'Button\', {
props: {
type: \'text\',
size: \'small\'
},
on: {
click: () => {
if (params.row.$isEdit) {
this.handleSave(params.row)
} else {
this.handleEdit(params.row)
}
}
}
}, params.row.$isEdit ? \'保存\' : \'编辑\')
}
}
],
data3: [
{
name: \'哈哈\',
age: 18,
address: \'上海\',
$isEdit: false
},
{
name: \'啦啦\',
age: 24,
address: \'北京\',
$isEdit: false
}
]
}
},
methods: {
// select_row(selection,index){
// console.log(\'select_row\',selection,index)
// this.$set(this.data3[index], \'$isEdit\', true)
// },
handleEdit (row) {
console.log(\'handleEdit\',row);
this.$set(row, \'$isEdit\', true)
},
handleSave (row) {
console.log(\'handleSave\',row);
this.$set(row, \'$isEdit\', false)
}
}
})
</script>
</body>
</html>