用vue实现多选框单选，全选和删除

本文主要是介绍用vue实现多选框单选，全选和删除，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文链接：https://www.jianshu.com/p/0c00c2c47f41

包含功能：

单选
多选
全选
批量删除

实现原理：

fruits：决定显示元素的多少，所以，对元素增删改查都操作它
fruitIds：通过对数组的增删改查，控制元素选中与否
isCheckedAll：判断是否全选，如果全选，就把数组fruits中的id都添加给fruitIds

注意事项：

1、全选框中，:checked="fruits.length===fruitIds.length && fruitIds.length"的处理，是为了防止数据和fruitIds都为空，却全选选中的情况
2、如果需要封装成组件，请把变量设置为属性props，把事件通过$.emit发射到父级
3、真正开发中，这里要用到vuex,axios处理真实数据

<template><div><input type="checkbox"class="input-checkbox":checked="fruits.length===fruitIds.length && fruitIds.length"@click="checkedAll" /><label>全选</label><div v-for="fruite in fruits":key="fruite.id"class="fruiteList"><input type="checkbox":checked="fruitIds.indexOf(fruite.id)>=0"name="checkboxinput"class="input-checkbox"@click="checkedOne(fruite.id)"><label>{{fruite.value}}</label></div><button @click="deleteSome">Delete</button></div>
</template><script>export default {data () {return {fruits: [{id: '1',value: '苹果'}, {id: '2',value: '荔枝'}, {id: '3',value: '香蕉'}, {id: '4',value: '火龙果'}],fruitIds: ['1', '3', '4'],// 初始化全选按钮, 默认不选isCheckedAll: false}},methods: {checkedOne (fruitId) {let idIndex = this.fruitIds.indexOf(fruitId)if (idIndex >= 0) {//如果已经包含就去除this.fruitIds.splice(idIndex, 1)} else {//如果没有包含就添加this.fruitIds.push(fruitId)}},checkedAll (e) {this.isCheckedAll = e.target.checked;if (this.isCheckedAll) {//全选时this.fruitIds = []this.fruits.forEach(item => {this.fruitIds.push(item.id)})} else {this.fruitIds = []}},deleteSome () {this.fruits = this.fruits.filter(item => this.fruitIds.indexOf(item.id) === -1)this.fruitIds = []}}
}
</script>
<style scoped lang="scss">
.input-checkbox {width: 40px;height: 40px;-webkit-appearance: none;position: absolute;outline: none;border: none;&::after {left: 0;top: 0;content: url("../assets/images/round.svg");}&:checked:after {left: 0;top: 0;content: url("../assets/images/done.svg");}
}
label {padding-left: 50px;height: 40px;line-height: 45px;
}
</style>

关于伪类元素不能修改宽高的问题

原文链接：https://blog.csdn.net/qq_27064559/article/details/83620479
:before /:after伪元素默认是一个行内元素，所以这个元素设置width/height是无效的
就像你对a元素设置width/height一样

你可以把图片设为背景图片，通过bakckground-size来设置大小

#center_box:before{
content:’’;
background-image:url(http://localhost/quding/photos/u14.png);
background-size:1000px 200px;
position: absolute;
width:1000px;
height:200px;
z-index: 100;
top: -110px;
}

这篇关于用vue实现多选框单选，全选和删除的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！