1、在 Table 标签内加入这两个方法,直接复制进去就可以
@cell-click="tabClick"
:row-class-name="tableRowClassName"
2、在el-table-column 标签内加入 template 标签内容
<el-table-column
label="设备名称"
prop="mdeviceName"
width="150"
show-overflow-tooltip
:render-header="renderHeader"
>
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex">
<el-input v-model="scope.row.mdeviceName"
maxlength="300"
placeholder="请输入设备名称"
size="mini" @blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.mdeviceName }}</span>
</template>
</el-table-column>
3、在方法和对象区域复制以下内容
export default {
data() {
return {
tabClickIndex: null, // 点击的单元格
tabClickLabel: '', // 当前点击的列名
}
},
methods: {
tableRowClassName({row, rowIndex}) {
// 把每一行的索引放进row
row.index = rowIndex
},
/**
* 添加明细原因 row 当前行 column 当前列
*/
tabClick(row, column, cell, event) {
switch (column.label) {
case '设备名称':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
case '设备编码':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
default:
return
}
// console.log('----------', this.tabClickIndex, row, column, cell, event)
},
/**
* 失去焦点初始化
*/
inputBlur(row, event, column) {
this.tabClickIndex = null
this.tabClickLabel = ''
},
}
}
网友评论