主要以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