vue.extend 实现表格，同时编辑多条数据

Ⅰ. vue.extend 使用场景

• 需要 频繁 向 多个类型 vue组件中 导入组件，而且存在 频繁切换；
• （如果 v-if  和 v-else ，需要到每个向里面去添加 ，不太好 ）
• 调用 方法就去页面中 ，添加一条   Message 提示  的vue组件 ，而且点击多次会多次弹出。

这时 ：vue.extend 就有了合理的出场机会。

• 效果如下：

•  需要创建 四个文件，举例如下 ：

  ①  inputBox  =>  双击后出现的输入框组件；

  ②  textBox   =>   双击已是输入框的，或点保存，还原的文本组件；

  ③  changeBox => 是将 上面两个组件导入 ，继承并暴露出去；

  ④  tableBox =>  通过new  changeBox 暴露的继承组件 ，实现功能。

---

Ⅱ. 通过 vue.extend 实现表格的任意编辑多条数据

•  首先创建一个输入框，和一个文本框组件，便于后面的继承。 

输入框如下  inputBox.vue

文本框如下 textBox.vue

---

•  创建一个 中间 Js 文件, 用于继承，上面 2 个输入框组件

   中间层  changeBox.js  

import Vue from "vue";
import  inputBox from "./inputBox.vue";
import textBox from "./textBox.vue";

const inputItem = Vue.extend(inputBox);
const textItem = Vue.extend(textBox);
export default {
    inputItem,
    textItem,
}

---

去使用extend  继承组件

采用 element - ui 的表格 ，方便双击 ，找到对应的 dom 【不用自己手写】

1. 通过 new  继承组件  ， 然后通过 $mount  , 去挂载指定的位置 ；
2. 写成 2 个方法  changeInput 【切换输入框】，changeText 【切换文本】；
3. 通过双击 判断 对应节点的   className  来 实现    输入框 ↔ 文本    来回切换 ；
4. keepAll 方法 ，用于将所有没有切换的 输入框  转换成文本 ， 主要通过遍历dom【注意 ：这里的dom数组是伪数组，转换成真数组才能用数组的方法】，来修改虚拟dom 
5. 通过遍历，重复调用 changeText  ，来实现全部保存成文本 ;

  table.vue最后表格组件代码整合：