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