elementUI双击表格展示输入框

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 = ''
            },
            
    }
}