小弟要实现的效果是:通过让用户选择要输入的数据,如图,然后动态生成表头,点击新增一行后,如图
,会出现可以让用户输入的框,我想请教的是,如何将这两个输入框绑定到他们对应的值呢?目前的代码是这样的
,我的表格数据是在tableData里,但是我的表头是通过tableHeader动态渲染,所以现在不知道生成的每个input框,应该怎么绑定它对应的值,请大佬们指点迷津!
小弟要实现的效果是:通过让用户选择要输入的数据,如图,然后动态生成表头,点击新增一行后,如图
,会出现可以让用户输入的框,我想请教的是,如何将这两个输入框绑定到他们对应的值呢?目前的代码是这样的
,我的表格数据是在tableData里,但是我的表头是通过tableHeader动态渲染,所以现在不知道生成的每个input框,应该怎么绑定它对应的值,请大佬们指点迷津!
通过[]
访问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");
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
v-model 绑定的应该是 scope.row[index][scope.column.prop]