远离其实很简单：就是在获取table数据后，对数组进行遍历，每一个都添加上一个show属性，并赋值为false，
然后在每个el-table-column中进行判断：
原理就是这样，其他的控件比如：选择框、时间框、数字选择框等等吧，都可以适用。
<el-table-column prop="name" label="地址"> <template scope="scope"> // 如果show=true的话，就显示el-input <el-input size="small" v-model="scope.row.name" v-show="scope.row.show" placeholder="请输入内容"></el-input> // 如果show=false的话，就显示值 <span v-show="!scope.row.show">{{scope.row.name}}</span> </template> </el-table-column>效果如下：
下面是完整地代码：
<template> <div class="rowEdit"> <div class="crud-opts"> <div class="crud-opts-left"> <el-button class="filter-item" size="mini" type="text" icon="el-icon-my-add" @click="edit()" > 编辑 </el-button> <el-button class="filter-item" size="mini" type="text" icon="el-icon-my-publish" @click="cancle" >取消 </el-button> <el-button class="filter-item" type="text" icon="el-icon-my-delete" size="mini" @click="save" > 保存 </el-button> </div> </div> <!--表格渲染--> <el-table ref="table" :height="tableHeight" v-loading="loading" :data="tabledatas" @selection-change="selectItem" @row-click="onSelectOp" style="width: 100%;"> <el-table-column type="selection" width="55" :reserve-selection="false" ></el-table-column> <el-table-column prop="dydjbm" label="电压等级"> <template scope="scope"> <el-select v-model="scope.row.dydjbm" v-show="scope.row.show" placeholder="请选择"> <el-option v-for="item in dydjbm" :key="item.value" :label="item.label" :value="item.label"> </el-option> </el-select> <span v-show="!scope.row.show">{{scope.row.dydjbm}}</span> </template> </el-table-column> <el-table-column prop="name" label="地址"> <template scope="scope"> <el-input size="small" v-model="scope.row.name" v-show="scope.row.show" placeholder="请输入内容"></el-input> <span v-show="!scope.row.show">{{scope.row.name}}</span> </template> </el-table-column> </el-table> </div> </template> <script> export default { data(){ return{ dydjbm: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }], tabledatas: [], selectlist: [] } }, methods:{ /** 单个去勾选时触发自定义的selectItem函数 @selection-change事件会默认传行数据进去， 用selectItem(rows)的rows接收就好，rows所选行数据的数组 */ selectItem(rows) { if (rows.length > 1) { var newRows = rows.filter((it, index) => { if (index == rows.length - 1) { this.$refs.table.toggleRowSelection(it, true); return true; } else { this.$refs.table.toggleRowSelection(it, false); return false; } }); this.selectlist = newRows; } else { this.selectlist = rows; } }, /** 点击那一行数据触发的事件默认传点击那行的数据，自定义onSelectOp(row)函数， 用row来接收点击的那行数据， 先把所有的选项清空this.$refs.multipleTable.clearSelection(); 再把点击的那行勾选this.$refs.multipleTable.toggleRowSelection(row, true); 把自定义数组清空this.selectlist = []; 把新勾选的数据push进数组this.selectlist.push(row); */ onSelectOp(row) { this.$refs.table.clearSelection(); this.$refs.table.toggleRowSelection(row, true); this.selectlist = []; this.selectlist.push(row); }, // 编辑 edit(row){ this.selectlist[0].show=true }, //保存 save(){ this.selectlist[0].show = false }, //取消 cancle(){ this.selectlist[0].show = false } }, created(){ // 发请求去后台拿数据,如果有api，就正常请求， //我这里是demo，就简单给list赋值了，原理一样。 // getlistApi().then(res => { // let list = res.data.list let list = [ { dydjbm: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { dydjbm: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { dydjbm: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { dydjbm: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }] list.forEach(element => { element["show"] = false }); this.tabledatas = list } } </script> <style> </style>
