element-ui实现表格内容修改

<template>
    <el-table
            :row-class-name="tableRowClassName"
            border
            :data="tableData"
            @cell-dblclick="doubleClickCell"
            style="width: 100%">
        <el-table-column
                prop="description"
                label="项目"
                align="center"
        >
        </el-table-column>
        <el-table-column

                prop="unit"
                label="单位"
                align="center"
        >
        </el-table-column>
        <el-table-column

                align="center"
                prop="levelOne"
                label="一级"
        >
            <template slot-scope="scope">
                <span v-if=" !scope.row.edit">{{scope.row.levelOne}}</span>
                <el-input v-else="scope.row.edit" v-model="scope.row.levelOne"
                          @blur="levelChange(scope.row)">{{scope.row.levelOne}}
                </el-input>
            </template>
        </el-table-column>
        <el-table-column

                align="center"
                prop="levelTwo"
                label="二级"
        >
            <template slot-scope="scope">
                <span v-if=" !scope.row.edit">{{scope.row.levelTwo}}</span>
                <el-input v-else="scope.row.edit" v-model="scope.row.levelTwo"
                          @blur="levelChange(scope.row)">{{scope.row.levelTwo}}
                </el-input>
            </template>
        </el-table-column>
        <el-table-column

                align="center"
                prop="levelThree"
                label="三级"
        >
            <template slot-scope="scope">
                <span v-if=" !scope.row.edit">{{scope.row.levelThree}}</span>
                <el-input v-else="scope.row.edit" v-model="scope.row.levelThree"
                          @blur="levelChange(scope.row)">{{scope.row.levelThree}}
                </el-input>
            </template>
        </el-table-column>
    </el-table>
</template>

===================================

<script>
    new Vue({
        el: '#order-app',
        data() {
            return {
                tableData: [{}],
                form: {},
                dialogVisible: false
            }
        },
        computed: {},

        created() {
            this.init();
        },
        mounted() {
            // this.loading = false
        },
        methods: {
            async init() {
                await getParament().then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data || []
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            onSubmit() {
                addCategory({'name': classData.name, 'type': this.type, sort: classData.sort}).then(res => {
                    console.log(res)
                    if (res.code === 1) {
                        this.$message.success('分类添加成功！')
                        if (!st) {
                            this.classData.dialogVisible = false
                        } else {
                            this.classData.name = ''
                            this.classData.sort = ''
                        }
                        this.handleQuery()
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            doubleClickCell(row, column, cell, event) {
                this.$set(row, "edit", true);
            },
            levelChange(row) {
                this.$set(row, "edit", false);
                //业务处理

            }


        }
    })
</script>