vue+elementUI 可编辑表格

elementUI表格属性：highlight-current-row（是否要高亮当前行）

el-table 配置属性 highlight-current-row 后 点击行触发 row-click 事件，会给当前行添加一个current-row 样式属性

思路：在需要编辑操作的列中设置span（显示数据）及input（编辑数据）通过current-row样式属性配置的权重控制显隐达到只读/编辑的效果。

html部分

        <el-button type="primary" size="small" @click="isEdit=!isEdit">{{isEdit?'只读':'编辑'}}</el-button>
        <el-table :data="userList" highlight-current-row :class="isEdit?'tb-edit':'tb-show'">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="成绩">
                <template slot-scope="scope">
                    <el-input size="small" v-model="scope.row.result" @blur="handleInputBlurResult({index:scope.$index,result:scope.row.result})" @keyup.enter.native="handleInputBlurResult({index:scope.$index,result:scope.row.result})"></el-input>
                    <span :class="scope.row.result<60?'c-red':'c-green'">{{scope.row.result||0}}</span>
                </template>
            </el-table-column>
            <el-table-column label="评级" prop="level">
                <template slot-scope="scope">
                    {{scope.row.level||"-"}}
                </template>
            </el-table-column>
        </el-table>

js部分

    data: function () {
        return {
            isEdit: false, // 控制表格只读/编辑状态
            userList: [{ // 列表数据
                    name: '瓜瓜',
                    result: 0,
                    level: ''
                },
                {
                    name: '康康',
                    result: 0,
                    level: ''
                }, {
                    name: '军军',
                    result: 0,
                    level: ''
                }, {
                    name: '江江',
                    result: 0,
                    level: ''
                }
            ]
        }
    },
    methods: {
        /** 
         * 成绩输入回车/失去焦点统计
         * @param {Number} index 行索引
         * @param {Number} result 成绩
         */
        handleInputBlurResult({
            index,
            result = 0
        }) {
            let level = '';
            if (result >= 85) { //计算对应评级
                level = 'A';
            } else if (result >= 60) {
                level = 'B';
            } else {
                level = 'C';
            }
            this.userList[index].level = level; //数据回填
        }
    }

css部分

<style lang="less">
.c-red {
    color: #F56C6C;
}
.c-green {
    color: #67C23A;
}
.tb-edit {
    .el-input {
        display: none
    }
    .current-row {
        .el-input {
            display: block
        }
        .el-input+span {
            display: none
        }
    }
}
.tb-show {
    .el-input {
        display: none
    }
}
</style>

demo中我额外添加了isEdit（控制el-table的class：tb-edit / tb-show）来控制表格的 只读/编辑 模式。以及输入数值之后的扩展方法 handleInputBlurResult 根据输入成绩值设置评级。

当然不局限于使用input做文本编辑，还可以添加各种其他控件进行赋值操作，关键点在于设置控件的显隐。