<el-table-column
    align="center"
    label="姓名"
  >
    <template slot-scope="scope">
      <!--isClick就是標識狀態(tài)，狀態(tài)處于編輯時候，顯示輸入框，狀態(tài)屬于呈現(xiàn)狀態(tài)就顯示文本內(nèi)容-->
      <el-input v-if="scope.row.isClick" v-model="scope.row.name"  @blur="blurFn(scope.row)"></el-input>
      <span @click="clickCell(scope.row)" v-else>{{scope.row.name}}</span>
    </template>
  </el-table-column>

let input = document.createElement('input') // 創(chuàng)建一個input標簽
input.value = '孫悟空' // 給input標簽賦值
document.body.appendChild(input) // 把input標簽追加到文檔body中

// input.vue文件
<template>
  <div class="cell">
    <el-input
      ref="elInputRef"
      size="mini"
      v-model.trim="cellValue"
    ></el-input>
  </div>
</template>

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

// data.js
import Vue from "vue";
import definedInput from "./input.vue";
// vue繼承這個input組件，就相當于一個構造函數(shù)了
const inputC = Vue.extend(definedInput);
// 暴露出去，哪里需要哪里引入
export default {
    inputC,
}

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

new extendComponents.inputC({ // 2. 實例化
    propsData: {
      // 使用propsData對象傳遞參數(shù)，子組件在props中可以接收到
      cellValue: cellValue, // 傳遞單元格的值
    },
  }).$mount(cell.children[0]);// 3. 掛載

// 外部組件傳遞
new extendComponents.inputC({
    propsData: {
      cellValue: cellValue, // 傳遞單元格的值
      saveRowData: this.saveRowData, // 傳遞回調(diào)函數(shù)用于通知，繼承組件中可以觸發(fā)之
    },
}).$mount(cell.children[0]); 

saveRowData(params){
    console.log('收到繼承組件消息通知啦參數(shù)為：',params)
}

// 內(nèi)部組件失去焦點時候通知
<el-input
  ref="elInputRef"
  size="mini"
  v-model.trim="cellValue"
  @blur="blurFn"
></el-input>

props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
    saveRowData: Function, // 外部，傳遞進來一個函數(shù)，當這個el-input失去焦點的時候，通過此函數(shù)通知外部
}

blurFn() {
  // 失去焦點，再拋出去，通知外部
  this.saveRowData({
    cellValue: this.cellValue,
    // 其他參數(shù)
  });
},

<template>
  <div class="cell">
    <el-input
      ref="elInputRef"
      size="mini"
      v-model.trim="cellValue"
      @blur="blurFn"
    ></el-input>
  </div>
</template>

<script>
export default {
  props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
    saveRowData: Function, // 外部，傳遞進來一個函數(shù)，當這個el-input失去焦點的時候，通過此函數(shù)通知外部
    cellDom: Node, // 單元格dom
    row: Object, // 單元格所在行數(shù)據(jù)
    property: String, // 單元格的key
  },
  mounted() {
    // 用戶雙擊后，讓其處于獲取焦點的狀態(tài)
    this.$refs.elInputRef.focus();
  },
  methods: {
    blurFn() {
      // 失去焦點，再拋出去，通知外部
      this.saveRowData({
        cellValue: this.cellValue,
        cellDom: this.cellDom,
        row: this.row,
        property: this.property,
      });
    },
  },
};
</script>

<style>
.cell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
}
</style>

<template>
  <span class="cell">{{ cellValue }}</span>
</template>

<script>
export default {
  props: {
    cellValue: {
      type: String | Number,
      default: "",
    },
  },
};
</script>

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,
}

<template>
  <div id="app">
    <el-table
      @cell-dblclick="dblclick"
      :cell-class-name="cellClassName"
      height="480"
      :data="tableData"
      border
    >
      <el-table-column align="center" type="index" label="序號" width="50">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="100">
      </el-table-column>
      <el-table-column align="center" prop="age" label="年齡" width="100">
      </el-table-column>
      <el-table-column align="center" prop="home" label="家鄉(xiāng)">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入繼承組件對象，可取其身上的inputC構造函數(shù)、或spanC構造函數(shù)生成組件dom
import extendComponents from "./threeC/data";
export default {
  data() {
    return {
      tableData: [
        {
          name: "孫悟空",
          age: 500,
          home: "花果山水簾洞",
        },
        {
          name: "豬八戒",
          age: 88,
          home: "高老莊",
        },
        {
          name: "沙和尚",
          age: 1000,
          home: "通天河",
        },
      ],
      /**
       * 存一份舊的值，用于校驗是否發(fā)生變化，是否修改
       * */
      oldCellValue: null,
    };
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex; // 自定義指定一個索引，下方能夠用到
    },
    dblclick(row, column, cell, event) {
      // 1. 序號列單元格不允許編輯，別的列單元格可以編輯
      if (column.label == "序號") {
        this.$message({
          type: "warning",
          message: "序號列不允許編輯",
        });
        return;
      }
      // 2. 存一份舊的單元格的值
      this.oldCellValue = row[column.property];
      // 3. 然后把單元格的值，作為參數(shù)傳遞給實例化的input組件
      let cellValue = row[column.property];
      // 4. 實例化組件以后，帶著參數(shù)，再掛載到對應位置
      new extendComponents.inputC({
        propsData: {
          // 使用propsData對象傳遞參數(shù)，子組件在props中可以接收到
          cellValue: cellValue, // 傳遞單元格的值
          saveRowData: this.saveRowData, // 傳遞回調(diào)函數(shù)用于保存行數(shù)據(jù)，組件中可以觸發(fā)之
          cellDom: cell, // 傳遞這個dom元素
          row: row, // 傳遞雙擊的行的數(shù)據(jù)
          property: column.property, // 傳遞雙擊的是哪個字段
        },
      }).$mount(cell.children[0]); // 5. $mount方法，用于將某個dom掛載到某個dom上
    },
    /**
     * 失去焦點的時候有以下操作
     *    1. 校驗新值是否等于原有值，若等于，說明用戶未修改，就不發(fā)請求。若不等于就發(fā)請求，然后更新tableData數(shù)據(jù)
     *    2. 然后使用$mount方法，掛載一個新的span標簽dom在頁面上，即恢復原樣，而span標簽也是實例化的哦
     * */
    saveRowData(params) {
      console.log("繼承的子組件傳遞過來的數(shù)據(jù)", params);
      // 1. 看看用戶是否修改了
      if (params.cellValue == this.oldCellValue) {
        console.log("未修改數(shù)據(jù)，不用發(fā)請求");
      } else {
        params.row[params.property] = params.cellValue;
        // 這里模擬一下發(fā)了請求，得到最新表體數(shù)據(jù)以后，更新tableData
        setTimeout(() => {
          //        給那個數(shù)組的     第幾項            修改為什么值
          this.$set(this.tableData, params.row.index, params.row);
        }, 300);
      }
      // 2. 恢復dom節(jié)點成為原來的樣子，有下面兩種方式

      /**
       * 方式一：使用官方推薦的$mount去掛載到某個節(jié)點上，上方也是
       * */
      new extendComponents.spanC({
        propsData: {
          cellValue: params.cellValue,
        },
      }).$mount(params.cellDom.children[0]);

      /**
       * 方式二：使用原生js去清空原節(jié)點內(nèi)容，同時再添加子元素
       * */
      // let span = document.createElement("span"); // 創(chuàng)建一個span標簽
      // span.innerHTML = params.cellValue; // 指定span標簽的內(nèi)容的值
      // span.classList.add("cell"); // 給span標簽添加class為cell
      // params.cellDom.innerHTML = ""; // 清空剛操作的input標簽的內(nèi)容
      // params.cellDom.appendChild(span); // 再把span標簽給追加上去，恢復原樣
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
}
</style>