vue+element动态表格绑定问题

Question

小弟要实现的效果是：通过让用户选择要输入的数据，如图，然后动态生成表头，点击新增一行后，如图，会出现可以让用户输入的框，我想请教的是，如何将这两个输入框绑定到他们对应的值呢？目前的代码是这样的，我的表格数据是在tableData里，但是我的表头是通过tableHeader动态渲染，所以现在不知道生成的每个input框，应该怎么绑定它对应的值，请大佬们指点迷津！

Answer 1

v-model 绑定的应该是 scope.row[index][scope.column.prop]

Answer 2

通过[]访问Object属性：

<el-input v-model="scope.row[item.prop]"></el-input>

jsfiddle挂了，放不了链接

---

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.1/lib/index.js"></script>
<div id="app">
  <template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(item,index) in tableHeader" :label="item.label">
        <template slot-scope="scope">
          <el-input v-model="scope.row[item.prop]"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
</div>

---

JS

var Main = {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "null"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: null
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: null
        }
      ],
      tableHeader: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        }
      ]
    };
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");