vue實現table表格的動態編輯
<template>
<div>
<Input size="large" style= "background-color:transparent;border:0;" />
<Table border ref="selection" :columns="columns41" :data="addLists"></Table>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
addLists:[{
unit: 'cedd'
}],
columns41: [{
type: 'index',
title: '序號',
width: 60
},
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '單位',
key: 'unit',
align : 'center',
className: "demo",
render: (h, params) => {
return h('div', [
h('Input', {
props: {
value: this.addLists[params.index].unit,
size: 'small',
},
style: {
marginRight: '5px',
display: this.flag ? '' : 'none'
},
on: {
'on-blur': (event) => {
this.addLists[params.index].unit = event.target.value
}
},
}, ''),
h('span',{
style: {
marginRight: '5px',
display: this.flag ? 'none' : ''
},
},this.addLists[params.index].unit),
]);
}
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px',
display: this.flag ? 'none' : ''
},
on: {
click: () => {
this.edit(params.index)
}
}
}, '修改'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px',
display: this.flag ? '' : 'none'
},
on: {
click: () => {
this.save(params.index)
}
}
}, '儲存'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '刪除')
])
}
}
],
}
},
methods: {
edit(index) {
this.flag = !this.flag;
},
save(index) {
this.flag = !this.flag;
},
remove(index){
this.addLists.splice(index, 1);
}
},
}
</script>
<style>
.demo{
color: #FF0000;
}
</style>