實(shí)現(xiàn)思路：

1. 聚焦在當(dāng)前行的時(shí)候，可以進(jìn)行文本的編輯，或者下拉框的選擇，主要用到 highlight-current-row 這個(gè)樣式

2. 借助template組件進(jìn)行編輯

具體代碼如下：

<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="請(qǐng)輸入內(nèi)容" @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
}