el-table实现行内编辑功能

远离其实很简单：就是在获取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>