实现思路:
聚焦在当前行的时候,可以进行文本的编辑,或者下拉框的选择,主要用到 highlight-current-row 这个样式
借助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
}