Vue+elementUI实现表格双击输入

基本思路

使用v-if和v-else控制表格显示文本还是输入框
每个属性的edit为false为不可编辑，为true是可编辑

输入可以是input、select、date-picker等等

代码：

页面：

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="font-size: 12px"
                @cell-dblclick="cellEdit">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="名字" align="center">
                <template slot-scope="scope">
                    <el-input v-if="scope.row.name.edit"
                              v-model="scope.row.name.value"
                              @blur="loseFocus(scope.row.name)">
                    </el-input>
                    <span v-else>{
   {
   scope.row.name.value}}</span>
                <</