Vue+elementUI实现表格双击输入

基本思路

使用v-if和v-else控制表格显示文本还是输入框
每个属性的edit为false为不可编辑，为true是可编辑

输入可以是input、select、date-picker等等

代码：

页面：

<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="font-size: 12px"
                @cell-dblclick="cellEdit">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="name" label="名字" align="center">
                <template slot-scope="scope">
                    <el-input v-if="scope.row.name.edit"
                              v-model="scope.row.name.value"
                              @blur="loseFocus(scope.row.name)">
                    </el-input>
                    <span v-else>{
     {
     scope.row.name.value}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
                <template slot-scope="scope">
                    <el-select v-if="scope.row.sex.edit"
                               v-model="scope.row.sex.value"
                               @visible-change="selectChange($event,scope.row.sex)">
                        <el-option label="男" value="男">男</el-option>
                        <el-option label="女" value="女">女</el-option>
                    </el-select>
                    <span v-else>{
     {
     scope.row.sex.value}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center">
                <template slot-scope="scope">
                    <el-date-picker
                            v-if="scope.row.date.edit"
                            v-model="scope.row.date.value"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @blur="loseFocus(scope.row.date)">
                    </el-date-picker>
                    <span v-else>{
     {
     scope.row.date.value}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

js：

<script>
    const tableData = []
    for (let i = 1; i < 10; i++) {
     
        tableData.push({
     
            name:'张三',
            sex:'男',
            date:'2020-01-01'
        })
    }
    export default {
     
        data() {
     
            return {
     
                tableData
            }
        },
        created() {
     
            // 将所有单元格设置为不可编辑
            this.initialTableEdit()
        },
        methods: {
     
            // 将所有单元格设置为不可编辑
            initialTableEdit() {
     
                this.tableData.forEach((item, index) => {
     
                    for (let i in item) {
     
                        item[i] = {
     
                            value: item[i],
                            edit: false
                        }
                    }
                })
            },
            // 单元格双击事件
            cellEdit(row, column) {
     
                // 将单元格变为输入框
                row[column.property].edit = true
                // 聚焦到单元格
                setTimeout(() => {
     
                    this.$refs[column.property].focus()
                }, 20)
            },
            // 当输入框失去焦点时不显示输入框
            loseFocus(editCell) {
     
                editCell.edit = false
            },
            selectChange(callback, editCell) {
     
                if (!callback) {
     
                    editCell.edit = false
                }
            }
        }
    }
</script>

@blur和@visible-change事件，参考element手册：

实现效果

源码: https://download.csdn.net/download/qq_35239421/12626293.