console 命令行工具 X clear
console
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
    <div id="app">
        <el-table height="600px" :data="tableData" border stripe style="width: 100%" @cell-dblclick="rowDblclick"
            :row-class-name="tableRowClassName">

            <el-table-column align="center" label="姓名" width="250">
                <template slot-scope="scope" prop="name">
                    <span v-if="scope.row.index === tabClickIndex && scope.column.label == tabClickLabel">
                        <el-input v-model="scope.row.name" @blur="inputBlur(scope)" v-focus clearable/>
                    </span>
                    <span v-else>{{scope.row.name}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="编号" width="250">
                <template slot-scope="scope" prop="number">
                    <span v-if="scope.row.index === tabClickIndex && scope.column.label == tabClickLabel">
                        <el-input v-model="scope.row.number" @blur="inputBlur" v-focus clearable/>
                    </span>
                    <span v-else>{{scope.row.number}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="地址" width="250">
                <template slot-scope="scope" prop="addr">
                    <span>{{scope.row.addr}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [
                        { 'name': 'name1', 'number': 'number1', 'addr': 'addr2', },
                        { 'name': 'name2', 'number': 'number2', 'addr': 'addr2', }
                    ],
                    tabClickIndex: null, // 点击的单元格
                    tabClickLabel: '', // 当前点击的列名
                };
            },
            //这里指令必须要添加，需要自动获取input焦点,要不然上面的v-focus无效且报错
            directives: {
                focus: {
                    inserted: function (el) {
                        el.querySelector("input").focus();
                    }
                }
            },
            methods: {
                tableRowClassName({ row, rowIndex }) {
                    // 把每一行的索引放进row
                    row.index = rowIndex;
                },
                /**
                 * 添加明细 row 当前行 column 当前列
                 */
                rowDblclick(row, column, cell, event) {
                    switch (column.label) {
                        //需要哪一列就在这里增加
                        case '姓名':
                        case '编号':
                            this.tabClickIndex = row.index;
                            this.tabClickLabel = column.label;
                            break
                        default:
                            return
                    }
                },
                /**
                 * 失去焦点初始化
                 */
                inputBlur(row, event, column) {
                    this.tabClickIndex = null
                    this.tabClickLabel = ''
                },
                /**
                 * 点击表格外的事件
                 */
                clickOutSide() {
                    this.inputBlur();
                }
            }
        });

    </script>
</body>

</html>