Vue + element 實(shí)現(xiàn)列表復(fù)選框并保存已選id集合

1.引用element組件多選框組，checkList為提交后臺(tái)數(shù)據(jù)得數(shù)組，tableData為數(shù)據(jù)源2.初始化tableData集合3.循環(huán)遍歷需要顯示得值4.在多選框組上添加chang事件

tableData: [{ date: ’2016-05-02’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1518 弄’ }, { date: ’2016-05-04’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1517 弄’ }, { date: ’2016-05-01’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1519 弄’ }, { date: ’2016-05-03’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1516 弄’ }]

<el-checkbox-group v-model='checkList' @change='ch'> <div v-for='(c,index) in tableData' :key='index'> <el-checkbox :label='c.date'>{{c.date}}</el-checkbox> </div> </el-checkbox-group>

ch(){ console.log(this.checkList) },

需要反顯得話 只要后臺(tái)將與:label對(duì)應(yīng)得字段用數(shù)組返回即可

總結(jié)

到此這篇關(guān)于Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合的示例代碼的文章就介紹到這了,更多相關(guān)vue element 多選框組內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！