<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<style>
*{margin: 0;padding: 0;}
#page-break{margin-top: 20px;margin-left: 20px;}
#page-break li{list-style: none;}
#page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
#page-break a:hover{background-color: #eee;}
#page-break a .banclick{cursor: not-allowed;}
#page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
#page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
#page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; 40px; float: left;}
#page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
#page-break .jumpbox .jumpbtn:active {color: #337ab7;}
</style>
<link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-switch"></script>
</head>
<body>
<div id="app-4" class="col-xs-12 main-table-wrapper">
<table class="table table-striped table-hover table-bordered" id="main-table">
<thead>
<tr >
<th>姓名</th><th>日期</th><th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData">
<td><input type="checkbox" :class="gernerateId(item.name)" :value="item.check" /> </td>
<td>{{ item.address }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app= new Vue({
el: '#app-4',
data:{
tableData: []
},methods: {
gernerateId:function(obj){
return "pers_"+obj;
}
},
updated: function () {
this.$nextTick(function () {
app.tableData.forEach(element => {
console.log($("." + app.gernerateId(element.name)));
$("."+ app.gernerateId(element.name)).bootstrapSwitch('state',element.check);
});
})
}
});
function dd(){
app.tableData=[{ date: '2016-05-02', name: '1', address: '上海市普陀区金沙江路 1518 弄', check:true
}, { date: '2016-05-04',name: '2', address: '上海市普陀区金沙江路 1517 弄', check:true
}, {date: '2016-05-01',name: '3', address: '上海市普陀区金沙江路 1519 弄', check:false
}, { date: '2016-05-03',name: '4',address: '上海市普陀区金沙江路 1516 弄', check:true
}];
}
dd();
</script>
</body>
</html>