项目中遇到再表格中显示输入框 编辑保存功能
代码如下:
<template>
<div>
<el-table :data="tableData" height="300" ref="tableData">
<el-table-column prop="num" label="数量">
<template slot-scope="scope">
<el-input
v-model="scope.row.num"
v-show="editStatus"
clearable
></el-input>
<div v-show="!editStatus">
{{ scope.row.num }}
</div>
</template>
</el-table-column>
</el-table>
<el-button
:type="this.editStatus ? 'success' : 'warning'"
@click="handleEditClick"
>
{{ editStatus ? "保存" : "编辑" }}
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
// 编辑状态: true - 可编辑;false - 不可编辑
editStatus: false,
tableData: [
{
num: 2,
},
],
};
},
methods: {
// 编辑
handleEditClick() {
this.editStatus = !this.editStatus;
},
},
};
</script>