vue+Element 实现table表格可编辑（select下

实现思路：

1. 聚焦在当前行的时候，可以进行文本的编辑，或者下拉框的选择，主要用到 highlight-current-row 这个样式

2. 借助template组件进行编辑

具体代码如下：

<el-table :data="columnData" class="tb-edit" style="width: 100%;margin-top: 20px" highlight-current-row @row-click="handleCellChange">
        <el-table-column prop="columnName" label="字段">
            <template scope="scope" >
                <el-input size="small" v-model="scope.row.columnName" placeholder="请输入内容" @change="handleCellEdit(scope.$index, scope.row)"></el-input>
                    <span>{{scope.row.columnName}}</span>
            </template>
        </el-table-column>
                    
        <el-table-column prop="isSensitive" label="敏感字段" width="120">
            <template scope="scope">
                <el-select v-model="scope.row.isSensitive"  @change="handleCellEdit(scope.$index, scope.row)">
                    <el-option v-for="item in sensitiveOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, columnData)">删除</el-button>
                </template>
        </el-table-column>
</el-table>

css样式：

.tb-edit .el-input {
    display: none
}
.tb-edit .current-row .el-input  {
    display: block
}
.tb-edit .current-row .el-input+span {
    display: none
}