Element Ui中table实现表格编辑效果

主要以css实现

.tb-edit .el-input,
    .tb-edit .el-input-number,
    .tb-edit .el-select {
        display: none;
        width: 100%;
    }

    .tb-edit .current-row .el-input,
    .tb-edit .current-row .el-input-number,
    .tb-edit .current-row .el-select {
        display: inherit;
    }

    .tb-edit .current-row .el-input + span,
    .tb-edit .current-row .el-input-number + span,
    .tb-edit .current-row .el-select + span {
        display: none;
    }

　　

 <el-table
                             class="tb-edit"
                             border
                             highlight-current-row
                             height="500px"
                             size="mini"
                             :data="newData"
                             style="width: 100%">

                         <el-table-column
                                 width="100px"
                                 label="标号">
                             <template scope="scope">
                                 <el-input size="mini" v-model="scope.row.stgId"
                                 ></el-input>
                                 <span>{{scope.row.stgId}}</span>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="noPumpPrice"
                                 label="非泵"
                                 width="70px"
                         >
                             <template scope="scope">
                                 <el-input size="mini" v-model="scope.row.noPumpPrice"
                                 ></el-input>
                                 <span>{{scope.row.noPumpPrice}}</span>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="pumpPrice"
                                 label="泵送"
                                 width="70px"
                         >
                             <template scope="scope">
                                 <el-input size="mini" v-model="scope.row.pumpPrice"
                                 ></el-input>
                                 <span>{{scope.row.pumpPrice}}</span>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="towerCranePrice"
                                 label="塔吊"
                                 width="70px"
                         >
                             <template scope="scope">
                                 <el-input size="mini" v-model="scope.row.towerCranePrice"
                                 ></el-input>
                                 <span>{{scope.row.towerCranePrice}}</span>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="createTime"
                                 label="执行时间"
                                 min-width="138px"
                         >
                             <template scope="scope">
                                 <el-date-picker type="datetime" size="mini" placeholder=""
                                                 v-model="scope.row.createTime" style="width: 100%;"></el-date-picker>
                                 <span>{{scope.row.createTime}}</span>
                             </template>
                         </el-table-column>
                     </el-table>

完美实现。

实现思路，控制 span 和 input的显示隐藏，达到编辑效果， 又因为 vue数据双向绑定，两个框中引用的对应项为一个，所以轻松实现可以编辑的table