1:在table组件里面,点击编辑给我显示出编辑状态,按钮换成对应的确定和取消按钮
<el-table-column prop="operation" label="操作" align="center" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.showBtn">
<el-button type="text" size="small">编辑</el-button>
<el-button
type="text"
size="small"
@click.native.prevent="deleteRow(scope.$index, tableData)"
>删除</el-button>
</span>
<span v-else>
<el-button type="text" size="small" @click="saveTableRow(scope)">保存</el-button>
<el-button type="text" size="small" @click.native.prevent="cancelAddRow(scope)">取消</el-button>
</span>
</template>
</el-table-column>
2:点击编辑之后,将表格里面的span标签改为input标签,呈现出可编辑状态
<el-table-column prop="IDAssignment" label="ID赋值" show-overflow-tooltip align="center">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input v-model="scope.row.IDAssignment"></el-input>
</span>
<span v-else>{{scope.row.IDAssignment}}</span>
</template>
</el-table-column>