ElementUI 表格单元行列动态显示输入框

<template>
  <div class="wagerTable">
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="wagerCode"
                label="下注号码">
            </el-table-column>
            <el-table-column prop="wagerAmount" label="下注金额">
                <template slot-scope="scope">
                <el-input
                    v-if="scope.row.editing"
                    v-model="scope.row.wagerAmount"
                ></el-input>
                <span v-else>{{ scope.row.wagerAmount }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="170px">
                <template slot-scope="scope">
                <el-button
                    v-if="scope.row.editing"
                    type="text"
                    @click="handleDefineCancel(scope.$index, scope.row)"
                    >确定</el-button
                >
                <el-button
                    v-if="scope.row.editing"
                    type="text"
                    @click="handleEditCancel(scope.$index, scope.row)"
                    >取消</el-button
                >
                <el-button
                    v-if="!scope.row.editing"
                    type="text"
                    @click="handleEditCancel(scope.$index, scope.row)"
                    >设置金额</el-button
                >
                <el-button
                    v-if="!scope.row.editing"
                    type="text"
                    @click="delWagerTableRow(scope.$index, scope.row)"
                    >删除</el-button
                >
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>

<style scoped>

</style>

<script>
  export default {
    data() {
        return {
            tableData: [{
                wagerCode: 'X,4,3,X',
                wagerAmount: '王小虎'
            },{
                wagerCode: 'X,4,3,X',
                name: '王小虎'
            },{
                wagerCode: 'X,4,3,X',
                name: '王小虎'
            },{
                wagerCode: 'X,4,3,X',
                name: '王小虎'
            },{
                wagerCode: 'X,4,3,X',
                name: '王小虎'
            }]
        }
    },
    methods: {
            // 编辑 或取消
        handleEditCancel(index, row) {
            if (row.editing) {
                this.$set(this.tableData[index], "editing", false);
            } else {
                this.$set(this.tableData[index], "editing", true);
            }
        },
        // 保存表格行内编辑内容
        handleDefineCancel(index, row) {
            this.$set(this.tableData[index], "editing", false);
        },
        delWagerTableRow(index, item) {
            this.$confirm("确定要移除【 " + item.wagerCode + " 】号码？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.tableData.splice(index, 1);
            }).catch(() => {});
        }
    }
  };
</script>