vue elementui双击变输入框效果

     <el-table
                ref="mainTable1"
                :key="1"
                :data="list"
                v-loading="listLoading"
                border
                fit
                highlight-current-row
                style=" 100%;"
                @cell-dblclick="celledit"
            >

                <el-table-column
                    min-width="80px"
                    label="修正值"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-input
                            v-if="scope.row.isEdit"
                            v-model="scope.row.reviseValue"
                            size="mini"
                            :ref="scope.row.id"
                            @blur="saveChange(scope.row)"
                        ></el-input>
                        <span v-else>{{scope.row.reviseValue}}</span>
                    </template>
                </el-table-column>

        celledit(row, column, cell, event) {
            var temp = this.list.find(m => m.id === row.id);
            temp.isEdit = column.label === '修正值';
            setTimeout(() => {
                this.$refs[row.id].focus()
            }, 50);
        },
        saveChange(row) {
            console.log("saveChange");

            var temp = this.list.find(m => m.id === row.id);
            temp.isEdit = false;
        }

说明：

1.el-table中添加@cell-dblclick事件

2.具体列上使用v-if来处理是显示文字还是书入框

3.如果想获取焦点，需要setTimeout一下才行

4.isEdit字段需要从接口返回，或者先定义，不然不起作用