Vue 自定义表头强制刷新input内容

通过 <template slot="header" slot-scope="scope"></template> 设置表头内容

设置后发现，输入内容无法正常显示，通过vue-tool数据也不完整，通过 @input="sgradeInp(scope.$index)"
强制刷新视图 this.$forceUpdate();

 <el-table :data="tableData" style="width: 100%" >
   <template v-for="(i, k) in spec">
     <el-table-column prop="date" :key="k" width="180">
       <template slot="header" slot-scope="scope">
         <el-input
           v-model="i.name"
           @input="sgradeInp(scope.$index)"
           clearable
           placeholder="填写规格名称"
         ></el-input>
       </template>
     </el-table-column>
   </template>

   <el-table-column prop="price" label="价格" width="180"> </el-table-column>
   <el-table-column prop="address" label="原价"> </el-table-column>
   <el-table-column prop="address" label="操作"> </el-table-column>
 </el-table>

<script>
export default {
  name: "goodsSpec",
  data() {
    return {
      tableData: [],
      spec: [
        {
          name: "demo",
        },
      ],
    };
  },
  methods: {
    sgradeInp(e) {
      this.$forceUpdate(); //强制更新视图数据
    },
    addSpec() {
      const item = {
        name: "",
      };
      this.spec.push(item);
    },
  },
};
</script>

el-table input输入无效

Vue 自定义表头 强制刷新input内容

Vue 自定义表头强制刷新input内容