vue+element动态表格绑定问题

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

阅读 5.9k
2 个回答

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

通过[]访问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");
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题