element-ui table 单元格可编辑

基本思想

在单元格中放input，然后设置border为0，当input focus时 设置border为1

参考代码

<el-table :data="auditRule.params" border style="width: 100%">
    <el-table-column prop="paramName" label="标识" width="150">
                <template slot-scope="scope">
                  <input type="text" v-model="scope.row.paramName" class="cell-input"/>
                </template>
    </el-table-column>
</el-table>

 

<style rel="stylesheet/scss" lang="scss" scoped>
    $border-focus-color:#A7D5EC;
    .cell-input {
        width: 100%;
        height: 100%;
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        &:focus {
            border: 1px solid $border-focus-color;
        }
    }
</style>

效果