vue中點選按鈕,新增一排輸入框
阿新 • • 發佈:2019-02-19
vue介面: <template> <div> <el-button @click="add">新增</el-button> <el-table :data="data"> <el-table-column prop="name" label="名稱"> <template slot-scope="scope"> <el-input v-model="data[scope.$index].name"></el-input> </template> </el-table-column> <el-table-column prop="age" label="年齡"> <template slot-scope="scope"> <el-input v-model="data[scope.$index].age"></el-input> </template> </el-table-column> <el-table-column prop="age" label="年齡"> <template slot-scope="scope"> <el-button @click="deleteRow(scope.$index)">刪除</el-button> </template> </el-table-column> </el-table> </div> </template> js方法:<script> export default { data(){ return { data:[] } }, methods:{ add(){ this.data.push({}); }, deleteRow(index){ this.data.splice(index,1); } } } </script>
主要是輸入框裡面繫結的下標