【vue3】可编辑el-table

<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"><template #default="{row,$index}"><input type="text" v-model="row.date" v-show="row.display" /><span v-show="!row.display">{{row.date}}</span></template></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-column label="操作" width="180"><template #default="{row,$index}"><el-button type="warning" @click="edit(row)">编辑</el-button><el-button type="danger" @click="save(row)">保存</el-button></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎'}, {date: '2016-05-04',name: '王小虎'}]}},methods: {edit(row, index) {row.display = true;},save(row, index) {row.display = false;}}
}
</script>