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

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

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

原文链接: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.js来实现多选框全选单选和反选: HTML代码: ```html <div id="app"> <input type="checkbox" v-model="selectAll" @change="selectAllCheck"> <label>全选</label> <br> <input type="checkbox" v-model="checkedItems" value="1"> <label>选项1</label> <br> <input type="checkbox" v-model="checkedItems" value="2"> <label>选项2</label> <br> <input type="checkbox" v-model="checkedItems" value="3"> <label>选项3</label> <br> <button @click="checkAllItems">全选</button> <button @click="uncheckAllItems">全不选</button> <button @click="invertSelection">反选</button> </div> ``` Vue.js代码: ```javascript new Vue({ el: '#app', data: { checkedItems: [], selectAll: false }, methods: { selectAllCheck: function() { if (this.selectAll) { this.checkedItems = [1, 2, 3]; } else { this.checkedItems = []; } }, checkAllItems: function() { this.checkedItems = [1, 2, 3]; this.selectAll = true; }, uncheckAllItems: function() { this.checkedItems = []; this.selectAll = false; }, invertSelection: function() { var self = this; var uncheckedItems = this.checkedItems.filter(function(item) { return !self.checkedItems.includes(item); }); this.checkedItems = uncheckedItems.concat([1, 2, 3].filter(function(item) { return !uncheckedItems.includes(item); })); } } }) ``` 在这个示例中,我们使用`v-model`指令来绑定多选框的选中状态,并使用`@change`事件来监听全选框的状态变化。`selectAllCheck`方法会在全选框的状态变化时被调用,根据全选框的状态更新选中的多选框。 我们还定义了三个方法:`checkAllItems`、`uncheckAllItems`和`invertSelection`,分别用于全选、全不选和反选多选框。在`checkAllItems`方法中,我们将所有多选框都选中,并将全选框的状态设置为`true`。在`uncheckAllItems`方法中,我们将所有多选框都不选中,并将全选框的状态设置为`false`。在`invertSelection`方法中,我们将未选中的多选框选中,已选中的多选框取消选中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值