<div id="app">
<el-table :data="tableData">
<el-table-column v-for="(item, idx) in tableColumn" :key="idx" :prop="item.prop" :label="item.label">
<template slot-scope="scope" >
<div v-if="scope.column.property === 'editTag'">
<p v-show="scope.row.editTag.isShow" v-text="scope.row.editTag.value" @click="edit('', scope)"></p>
<el-input v-show="!scope.row.editTag.isShow" v-model="scope.row.editTag.value" @blur.stop="edit($event, scope)"></el-input>
</div>
<div v-else>
<span v-text="scope.row[item.prop]"></span>
</div>
</template>
</el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data(){
return {
tableData: [
{
editTag: {
isShow: true,
value: 123
},
test: 'Demo'
}
],
tableColumn: [
{
label: '可编辑项',
prop: 'editTag'
},
{
label: 'demo',
prop: 'test'
}
]
}
},
methods: {
edit(value, scope) {
console.log(scope, value)
this.$set(this.tableData[scope.$index].editTag, 'isShow', !scope.row.editTag.isShow)
}
}
})
</script>