巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）

问题描述

有一个简单的表格，产品要求实现双击可编辑

看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态。大致代码如下：

这种方式有其适用场景，但是得每个el-table-column列中都加上el-input和span以及v-if和v-else。我们尝试一下动态添加el-input，就是点击那个单元格，给那个单元格添加el-input让其处于可编辑状态，然后适时移除即可。这样的话，很多列的时候，就不用加很多个v-if和v-else啦。我们先看一下效果图

效果图

代码思路

第1步：给el-table绑定双击事件 @cell-dblclick='dblclick'，再双击事件的回调函数中，可以得知点击的是哪一行、那一列、那个单元格dom，以及点击事件。dblclick(row, column, cell, event) {...}，这个是饿了么官方提供的，没啥好说的
第2步：重点来喽
- 第2.1步：单元格双击事件以后，我们首先创建一个el-input标签，然后把点击的这个单元格的值，作为参数props让这个el-input接收，这样的话el-input就会显示这个单元格的值了，就可以编辑了。问题一：如何创建一个el-input标签？ ，客官稍等，下方会解答
- 第2.2步：把创建好的el-input标签替换掉原来的单元格span标签，这样的话，就可以看到单元格变成了可输入的输入框了。问题二：如何把新创建的el-input标签，替换原有的span标签 ，客官稍等，下方会解答
- 第2.3步，当用户编辑完了点击别处时候，即输入框失去焦点的时候，再把el-input输入框标签移除掉，恢复默认的span标签（当然失去焦点的时候，就要发请求修改数据了）问题三：如何移除el-input标签，并恢复原有的span标签，客官稍等，下方会解答
这样的话，每次双击搞一个input标签用于修改，每次改完了失去焦点，就恢复默认单元格展示状态了，功能就实现了

代码思路中的三个问题解答

问题一：如何创建一个el-input标签？

我们知道，如果是创建原生的input标签并指定一个值，比较简单，直接：

let input = document.createElement('input') // 创建一个input标签
input.value = '孙悟空' // 给input标签赋值
document.body.appendChild(input) // 把input标签追加到文档body中

不过el-input标签不能通过上述方式创建，因为document.createElement()方法虽然可以创建出来el-input标签，但是dom并不认识这个el-input标签，所以页面没有变化。毕竟饿了么的el-input也是把input标签做一个二次封装的

所以，这里我们可以使用Vue.extend()方法去继承一个组件并暴露出去，而继承的这个组件中又有一个input标签，所以那个需要使用，那里就可以引入并new出来一个el-input了。关于Vue.extend()的定义啥的，这里不赘述，详情看官方文档。笔者之前也写过一篇Vue.extend文章，传送门：https://segmentfault.com/a/11...

首先搞一个.vue文件，用于继承

// input.vue文件


props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
}

然后定义一个data.js文件，继承input.vue文件，并暴露

// data.js
import Vue from "vue";
import definedInput from "./input.vue";
// vue继承这个input组件，就相当于一个构造函数了
const inputC = Vue.extend(definedInput);
// 暴露出去，哪里需要哪里引入
export default {
    inputC,
}

页面中引入并使用

// page.vue
import extendComponents from "./threeC/data"; // 1. 引入

new extendComponents.inputC({ // 2. 实例化
    propsData: {
      // 使用propsData对象传递参数，子组件在props中可以接收到
      cellValue: cellValue, // 传递单元格的值
    },
  }).$mount(cell.children[0]);// 3. 挂载

propsData对象用于给继承的组件传递参数，也可以传递一个函数，从而继承组件通过这个函数通知外部使用组件，详情见后续完整代码

问题二三：el-input标签和span标签的来回替换恢复

使用$mount方法去做来回替换，$mount可以把一个子dom元素追加到父dom元素内部，相当于appendChild

然后这里需要有一个替换的时机，就是实例化的组件中的el-input失去焦点的时候，去通知外部使用的组件，所以可以在外部使用是，在propsData中传递一个函数到继承的组件，如：

// 外部组件传递
new extendComponents.inputC({
    propsData: {
      cellValue: cellValue, // 传递单元格的值
      saveRowData: this.saveRowData, // 传递回调函数用于通知，继承组件中可以触发之
    },
}).$mount(cell.children[0]); 

saveRowData(params){
    console.log('收到继承组件消息通知啦参数为：',params)
}

// 内部组件失去焦点时候通知


props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
    saveRowData: Function, // 外部，传递进来一个函数，当这个el-input失去焦点的时候，通过此函数通知外部
}

blurFn() {
  // 失去焦点，再抛出去，通知外部
  this.saveRowData({
    cellValue: this.cellValue,
    // 其他参数
  });
},

所以当内层失去焦点的时候，就可以通知外层去做一个替换了，就是把单元格dom重新做一个$mount挂载，就把el-input替换成了span了，为了进一步理解，这里的span我们也可以使用继承的方式，是new实例化使用，详情见下方完整代码

完整代码

目录结构

threeC
-- data.js
-- input.vue
-- span.vue
three.vue

用于继承的el-input组件

input.vue

用于继承的span组件

span.vue

统一继承并暴露data.js文件

import Vue from "vue";
import definedInput from "./input.vue";
import definedSpan from "./span.vue";

const inputC = Vue.extend(definedInput);
const spanC = Vue.extend(definedSpan);

export default {
    inputC,
    spanC,
}

使用继承的three.vue组件

总结

使用Vue.extend()方法，可以继承一些组件，甚至继承一些复杂的组件，在实际业务场景中会有巧妙的使用。具体业务场景具体分析。

此外，上述代码中是el-input的继承，其实，我们也可以做el-select的继承，思路和上方类似，这样就可以在表格中双击单元格，选择并更改对应的下拉框更改el-table的单元值了，比如如果有性别这一列，那是下拉框的形式的。道友们可以按照这个思路发散哦...

好记性不如烂笔头，记录一下吧 ^_^