vue table中組件數據不能渲染，不能輸入或點擊

首先特別感謝這幾位朋友的回答讓我能解決問題，大家也可以直接看下面的文章！！

解決Vue 通過下表修改數組,頁面不渲染的問題

vue深入響應式式原理——對象 數組

Vue中input框手動賦值成功卻無法在編輯input框的值？？

vue修改對象的屬性值後頁面不重新渲染的實例

(1)數據不能渲染.

table中的數組數據發生改變，數據不能渲染，用以下方式進行解決，我這裏數組中是對象，數組中是其他類型也可

   const obj = this.table[this.processCurrentIndex];
   obj.processName = name;
   obj.processId = id;
   obj.processCode = code;
   this.table.splice(this.processCurrentIndex, 1, obj);

（說白了，這裏需要用splice將table中的一整行數據進行替換，其他類型也一樣）

 

(2)不能輸入或者不能點擊.

開發需要，table中的 input框手動賦值成功卻無法在編輯input框的值，或者一些操作，比如input不能輸入，按鈕不能點擊等等

解決方法 在組件外圍添加一層template 並聲明scope，然後設置初始值 ，代碼如下:

根據官方文檔定義：如果在實例創建之後添加新的屬性到實例上，它不會觸發視圖更新

1.input框
          <el-table-column align="center" prop="number" label="數量" width="80">
            <template scope="scope">
              <el-input v-model="scope.row.number" size="mini"></el-input>
            </template>
          </el-table-column>

2.switch按鈕
         <el-table-column
            align="center"
            width="90"
            prop="enabled"
            label="是否可用"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enabled"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>

3.由此Vue實例創建時，mixData屬性名並未聲明，因此Vue就無法對屬性執行 getter/setter 轉化過程，導致mixData屬性不是響應式的，因此無法觸發視圖更新。解決的方式有兩種，第一種就是顯示的聲明對象的屬性，用在數據類型不復雜的情況，比如單純的一個對象的時候可以直接先設置初始值，如：

 data() {
    return {
      mixData: {
        number: 1,
        enabled: 1,
      }, // 用來存放選擇的數據，最後放入table中
    };
  },

其次也可以使用使用Vue的全局API: $set()賦值，

這裏我用的是遍歷某個數組，這個數組有很多對象，將對象取出，放在最後的table中，比上面複雜，所以在遍歷的時候進行數據設置

  const savaLen = this.savaMaterial.length;
        for (let i = 0; i < savaLen; i++) {
          this.$forceUpdate();
          this.$set(this.savaMaterial[i], 'sort', this.table.length + i + 1);
          this.savaMaterial[i].processCode = code;
          this.savaMaterial[i].processName = name;
          this.savaMaterial[i].processId = id;
          this.$set(this.savaMaterial[i], 'number', 1);  //數量初始值爲1
          this.$set(this.savaMaterial[i], 'enabled', 1);  //enabled就是點擊按鈕
        }

  for (let i = 0; i < savaLen; i++) {
          this.table.push(this.savaMaterial[i]); // 將數據放入table中
        }