vue 实现选中和全选小功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table, td, th{
		    border:1px solid #ebebeb;
		    border-collapse:collapse;
		    text-align: center;
		}
		table {
			width:500px;
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div class="app">
		<table>
			<thead>
				<tr>
					<th style="line-height: 38px">全选
						<input type="checkbox" v-model="allchecked" @click="changeState(allchecked)" style="zoom:200%;vertical-align: middle">
					</th>
					<th>name</th>
					<th>age</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in list">
					<td><input type="checkbox" v-model="item.checked" style="zoom:200%"></td>
					<td>{{item.name}}</td>
					<td>{{item.age}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		var list=[
			{
				name:'小明',
				age: 23,
				checked: false
			},
			{
				name:'小红',
				age: 2,
				checked: true
			},
			{
				name:'小蓝',
				age: 23,
				checked: true
			},
			{
				name:'小bai',
				age: 40,
				checked: true
			},
			{
				name:'王小二',
				age: 18,
				checked: false
			}
		]
		new Vue({
			el: '.app',
			data: {
				list,
				allchecked:false
			},
			methods:{
				changeState(val){
					this.list.forEach(item => {
		           		if (val === false) {
		           			item.checked = true
		           		} else {
		           			item.checked = false
		           		}
		           	})
				}
			},
	       	watch:{
				list:{
    				handler(val) {
    					console.log('watch数组的变化',val)
    					var i = 0
    					this.list.forEach(item => {
		           			if(item.checked === true) i++
		           		})
		           		if (i===this.list.length) {
		           			this.allchecked = true
		           		} else {
		           			this.allchecked = false
		           		}				
    				},
    				deep:true
    			}
			}
		})
	</script>
</body>
</html>
vue 实现选中和全选 小功能

猜你喜欢

vue 实现选中和全选小功能
