ELE Table表头是动态生成，新增是本地生成，本地生成input的v-model绑定动态数据的id做动态绑定不生效

Question

代码直接复制可用，本地模拟数据，要引入ElementUI
<template>
  <div class="">
    
    <el-table
      :data="dataList"
      style="width: 100%"
    >
      <el-table-column
        header-align="center"
        align="center"
        type="selection"
      >
      </el-table-column>
      <el-table-column
        v-for="data in staffingList"
        :key="data.id"
        header-align="center"
        align="center"
        :label="data.name"
        ref="isTd"
      >
        <template slot-scope="{ row }">
          <span v-if="row.editFlag && isEdit">
            {{row.id}}
            <!-- 问题在这,绑定失效上方打印本地ID相同所以不能绑定这个  -->
            <!-- 主要问题: 表头动态渲染, v-model绑定不了数据的动态ID，如果绑定本地ID就会出现ID相同所有输入框同时输入问题 -->
            <el-input
              :style="{ width: inputW2 }"
              v-model="row.option[data.id]"
              placeholder="请输入"
            ></el-input>
          </span>

          <span v-else>
            {{ row.option }}
          </span>
          
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="170"
        label="操作"
      >
        <template slot-scope="scope">
          <template v-if="isEdit">
            <template v-if="scope.row.editFlag">
              <el-button
                type="text"
                size="small"
                @click="save(scope.row.id, scope.$index)"
                >保存</el-button
              >
            </template>
            <template v-else>
              <el-button
                type="text"
                size="small"
                @click="edit(scope.row.id, scope.$index)"
                >编辑</el-button
              >
            </template>
            <el-button
              type="text"
              size="small"
              @click="deleteHandle(scope.row, scope.$index)"
              >删除</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="createPlanItem" v-if="isEdit" @click="createPlanItem">
      +新增
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
export default {
  data() {
    return {
      dataList: [],
      inputW2: "auto",
      staffingList: [
        { id: 1, name: "甲", module: "" },
        { id: 2, name: "乙", module: "" },
        { id: 3, name: "丙", module: "" },
        { id: 4, name: "丁", module: "" },
        { id: 5, name: "常日", module: "" },
      ],
    };
  },
  components: {},
  props: {
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  methods: {

    /* 新增 */
    createPlanItem() {
      if (this.dataList.length <= 0) {
        this.dataList.push({
          id: 1,
          option: '',
          editFlag: true,
        });
      } else {
        this.dataList.push(
          {id: this.dataList[this.dataList.length-1].id+1, option: "", editFlag:true}          
        );
      }
      this.$nextTick(() => {
        
        this.$refs.isTd.forEach(e => {
          console.log(e);
        })
        
        this.dataList[this.dataList.length - 1].editFlag = true;
      });
    },

    /* 保存 */
    save(id, $index) {
      let obj = this.dataList[$index];
      console.log(obj);
      obj.editFlag = false;
      this.$set(this.dataList, $index, obj);
    },
    
    /* 修改 */
    edit(id, $index) {
      let obj = this.dataList[$index];
      obj.editFlag = true;
      this.$set(this.dataList, $index, obj);
    },
    
    /* 删除 */
    deleteHandle(row, index) {
      let id = row.id;
      this.$confirm(`确定对[id=${id}]的项进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (row.stepManageId) this.delList.push(row); //保存被删除的记录项
        this.dataList.splice(index, 1);
      });
    }
  },
  updated() {
    // console.log(this.dataList);
  },
};
</script>

Answer 1

刚才群里一大佬帮解决了：

关键在这v-model="dataList[$index][data.name]"

 <template slot-scope="{ row, $index }">
          <span v-if="row.editFlag && isEdit">
            <el-input
              :style="{ width: inputW2 }"
              v-model="dataList[$index][data.name]"
              placeholder="请输入"
            >
            </el-input>
          </span>

          <span v-else>
            {{ dataList[$index][data.name] }}
          </span>
        </template>
      </el-table-column>