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;
    }

　　

 1 <el-table
 2                             class="tb-edit"
 3                             border
 4                             highlight-current-row
 5                             height="500px"
 6                             size="mini"
 7                             :data="newData"
 8                             style="width: 100%">
 9 
10                         <el-table-column
11                                 width="100px"
12                                 label="标号">
13                             <template scope="scope">
14                                 <el-input size="mini" v-model="scope.row.stgId"
15                                 ></el-input>
16                                 <span>{{scope.row.stgId}}</span>
17                             </template>
18                         </el-table-column>
19                         <el-table-column
20                                 prop="noPumpPrice"
21                                 label="非泵"
22                                 width="70px"
23                         >
24                             <template scope="scope">
25                                 <el-input size="mini" v-model="scope.row.noPumpPrice"
26                                 ></el-input>
27                                 <span>{{scope.row.noPumpPrice}}</span>
28                             </template>
29                         </el-table-column>
30                         <el-table-column
31                                 prop="pumpPrice"
32                                 label="泵送"
33                                 width="70px"
34                         >
35                             <template scope="scope">
36                                 <el-input size="mini" v-model="scope.row.pumpPrice"
37                                 ></el-input>
38                                 <span>{{scope.row.pumpPrice}}</span>
39                             </template>
40                         </el-table-column>
41                         <el-table-column
42                                 prop="towerCranePrice"
43                                 label="塔吊"
44                                 width="70px"
45                         >
46                             <template scope="scope">
47                                 <el-input size="mini" v-model="scope.row.towerCranePrice"
48                                 ></el-input>
49                                 <span>{{scope.row.towerCranePrice}}</span>
50                             </template>
51                         </el-table-column>
52                         <el-table-column
53                                 prop="createTime"
54                                 label="执行时间"
55                                 min-width="138px"
56                         >
57                             <template scope="scope">
58                                 <el-date-picker type="datetime" size="mini" placeholder=""
59                                                 v-model="scope.row.createTime" style="width: 100%;"></el-date-picker>
60                                 <span>{{scope.row.createTime}}</span>
61                             </template>
62                         </el-table-column>
63                     </el-table>

完美实现。

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