vue element-ui 表格点击编辑，变成input框输入

效果图
before：

after：

实现：
方法一 不推荐
HTML部分

<el-row :gutter="20" class="kong">
    <el-table :data="prototypes" style="width: 100%;">
    	// 序号栏目 type="index"
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        // 此页重点部分  编辑之前以span形式显示，点击编辑之后，以input栏目显示
        <el-table-column label="字段名称" width="380">
            <template slot-scope="scope">
                <span v-if="scope.row.vVisible">{{scope.row.name}}</span>
                <el-input v-else v-model="scope.row.name"></el-input>
            </template>
        </el-table-column>
  		
        <el-table-column label="操作" width="160">
            <template slot-scope="scope">
                <div class="special">
                    <span v-if="scope.row.vVisible" class="items" @click="edit(scope.row)">编辑</span>
                    <span v-else class="items" @click="edit(scope.row)">保存</span>
                    <span>|</span>
                    <span class="items" @click="deleteit(scope.row)">删除</span>
                </div>
            </template>
        </el-table-column>
    </el-table>
</el-row>

JS部分

export default {
    data() {
        return{
        	// 表格绑定的数据
            prototypes:[{
                name: 'type',
                describe: '设备类型字段，不可修改',
                isNull: false,
                vVisible: true
            },
            {
                name: 'id',
                describe: '设备唯一标识符，同类型设备不允许',
                isNull: true,
                vVisible: true
            },
            {
                name: 'name',
                describe: '设备名称',
                isNull: true,
                vVisible: true
            }],
        }
    },
    methods: {
    	// 点击编辑按钮
        edit(row) {
            row.vVisible = !row.vVisible
        },
        // 点击删除按钮
        deleteit(row) {

        }
    },

CSS部分

.special{
    cursor: pointer;
    .items{
        &:hover {
            color: #6fbaff;
        }
    }
}

方法二：推荐

目前探索出来，最好用的一种方法

<el-table-column prop="describe" label="没想到吧" header-align="center" align="center">
     <template slot-scope="scope">
     	// 利用v-if  else来显示
        <span v-if="editdes != scope.row.id" @click="switchDesState(scope.row)">{{scope.row.describe}}</span>
        <el-input v-model="scope.row.describe"  @blur="levelDesIt(scope.row)" v-else>
        </el-input>
    </template>
</el-table-column>


data() {
    return{
        editdes: null //标识是否处于编辑状态
	}
}

// 双击span会触发次函数，赋值使得编辑状态开启，row.id为唯一的，不会出现点击一个编辑框，其他也受到影响的情况出现
switchDesState(row) {
     this.editdes = row.id  
 },
 // 当input框失去焦点时，会触发此函数，使得此编辑状态关闭
 levelDesIt(row) {
     this.editdes = null
 }

方法二扩展
带验证规则（判断值是否为空，值是否已经存在）

<template slot-scope="scope">
   <span v-if="editdes!= scope.row.id" @click="switchState(scope.row)">{{scope.row.levelname}}</span>
   // 里面添加校验
   <el-form :model="{levelname: scope.row.levelname}" ref="numberValidateForm" class="demo-ruleForm" v-else>
       <el-form-item prop="levelname"
           :rules="[{ required: true, validator: checkFieldName},]">
           <el-input v-model="scope.row.levelname" autocomplete="off" @blur="levelIt(scope.row)"></el-input>
       </el-form-item>
   </el-form>
</template>

data() {
    return{
        editdes: null //标识是否处于编辑状态
	}
}

// 双击span会触发次函数，赋值使得编辑状态开启，row.id为唯一的，不会出现点击一个编辑框，其他也受到影响的情况出现
switchDesState(row) {
    this.editdes = row.id  
},
// 当input框失去焦点时，会触发此函数，使得此编辑状态关闭
levelDesIt(row) {
    this.editdes = null
}

//验证规则  写在methods中
checkFieldName(rule, value, callback ) {
    if (!value) {
        return callback(new Error('name不能为空'));
    } else {
        let num = 0;
        this.levelTable.forEach((item) => {
            if (item.levelname == value) {
                num += 1;
            } 
        })
        if(num > 1) {
            return callback(new Error('字段名不能重复'));
        }
    }
    return callback();
},