View UI Table 设置单元格可编辑

<template>
<view class="page-box">
<Icon type="md-add-circle" size="26" class="qa-icon" @click="proofRowChange" />
<Table border :columns="columns" :data="data" class="proof-table">
<template slot-scope="{ row,index }" slot="name">
<Input v-model="data[index].name" placeholder="名称" v-if="row.endSve" />
<div v-else>{{ row.name }}</div>
</template>
<template slot-scope="{ row,index }" slot="specification">
<Input v-model="data[index].specification" placeholder="规格" v-if="row.endSve" />
<div v-else>{{ row.specification }}</div>
</template>
<template slot-scope="{ row,index }" slot="quantity">
<InputNumber :max="10" :min="1" v-model="data[index].quantity" placeholder="数量" v-if="row.endSve"></InputNumber>
<div v-else>{{ row.quantity }}</div>
</template>
</Table>
</view>
</template>

<script>
export default {
data() {
return {
columns: [
{title: '序号',type: 'index',width: 100,align: 'center'},
{title: '名称',slot: 'name',align: 'center'},
{title: '规格',slot: 'specification',align: 'center'},
{title: '数量',slot: 'quantity',align: 'center'},
{title: '操作',key: 'action',align: 'center',width: 130,
render: (h, params) => {
return h('div', [
h('Button', {
props: {type: 'text',size: 'small'},
on: {click: () => {this.proofEnd(params.index)}}
}, params.row.endSve ? '保存' : '编辑'),
h('Button', {
props: {type: 'text',size: 'small'},
on: {click: () => {this.proofRemove(params.index)}}
}, '删除')
]);
}
}
],
data: [{name: '',specification: '',quantity: null,endSve: false}]

}
},
created() {

},
methods: {
// 证据材料 新增
proofRowChange() {
let data = {name: '',specification: '',quantity: null,endSve: false}
this.data.push(data)
},
// 证据材料 删除
proofRemove(index) {
this.data.splice(index, 1);
},
// 证据材料 编辑 保存
proofEnd(index) {
this.data[index].endSve = !this.data[index].endSve
}
}
}
</script>

<style scoped>

</style>