- 首先是表格中插入输入框–可利用插槽
- 要控制输入框的显示,要加显示控制
- 点击事件,鼠标移开输入框不显示
<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" size="mini" @cell-click="tabClick">
<el-table-column label="可编辑"
<template slot-scope="scope">
<div
@click.stop
v-if="edit.rowIndex == scope.$index"
class="e-item"
>
<el-input
clearable
:ref="column.field + scope.$index"
v-model="test"
@blur="inputBlur"
></el-input>
</div>
</template>
</el-table-column>
</el-table>
通过tableRowClassName设置index
tableRowClassName ({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex
}
通过单元格点击事件,设置edit.rowIndex值
// tabClick row 当前行 column 当前列
tabClick (row, column, cell, event) {
switch (column.label) {
case '可编辑':
this.edit.rowIndex = row.index
break
default: return
}
}
单元格失去焦点事件
// 失去焦点初始化
inputBlur (row) {
this.edit.rowIndex = -1;
}