标签：index return 反选 js item 全选 选中 ele checkedList

就算全世界离开你，还有一个我来陪，我会永远站在你身边。

对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。

多选和取消选择

效果图如下：

代码如下：

<template>
  <div class="app">
      <div class="ul">
        <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index">{{item}}</div>
      </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list:['沉鱼落雁','闭月羞花','古灵精怪','调皮可爱','说的没错','就是你'],//所有数据
      checkedList:[],//选中的数据
    }
  },
  methods: {
    checkFn(item){
      //findIndex方法返回数组中满足所提供的测试函数的第一个元素的索引，为上次的方案的升级版
      //地址：https://www.nhooo.com/jsref/array_findindex.html
      //通过该方法来判断当前点击的元素是否已经被选中过，-1就是未选中
      let index = this.checkedList.findIndex(ele=>{
        return ele === item
      })
      if(index != -1){
        this.checkedList.splice(index,1)//取消选中
      }else{
        this.checkedList.push(item)//选中
      }
    },
    isActiveFn(item){//判断元素是否选中
      //index如果不是-1，那就说明是被选中的
      let index = this.checkedList.findIndex(ele=>{
        return ele === item
      })
      if(index!= -1){
        return true
      }else{
        return false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ul{
  display: flex;
  padding: 15px;
  .li{
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid #999;
    margin-right: 10px;
    cursor: pointer;
    &.active{
      background: chocolate;
      color: #fff;
      border-color: chocolate;
    }
  }
}
</style>

代码要点：

1. 既然是多选，那么肯定是一个数组来存储选中的数据，例如checkedList
2. checkFn点击事件中，同时负责了取消选中和选中
3. 在点击某一项时，当它时选中时，肯定是要取消选中的，通过findIndex判断了点击的那一个是否在checkedList
4. isActiveFn在动态绑定class的时候起到了判断是否选中的作用

全选和反选

我们再上面的代码上加上两个按钮，一个全选一个反选。

大致效果如下：

代码：

<template>
  <div class="app">
      <div class="ul">
        <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index">{{item}}</div>
      </div>
      <div class="btns">
        <button @click="selectAll()">全选</button>
        <button @click="reverseSelect()">反选</button>
      </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list:['沉鱼落雁','闭月羞花','古灵精怪','调皮可爱','说的没错','就是你'],//所有数据
      checkedList:[],//选中的数据
    }
  },
  methods: {
    checkFn(item){
      //findIndex方法返回数组中满足所提供的测试函数的第一个元素的索引，为上次的方案的升级版
      //地址：https://www.nhooo.com/jsref/array_findindex.html
      //通过该方法来判断当前点击的元素是否已经被选中过，-1就是未选中
      let index = this.checkedList.findIndex(ele=>{
        return ele === item
      })
      if(index != -1){
        this.checkedList.splice(index,1)//取消选中
      }else{
        this.checkedList.push(item)//选中
      }
    },
    isActiveFn(item){//判断元素是否选中
      //index如果不是-1，那就说明是被选中的
      let index = this.checkedList.findIndex(ele=>{
        return ele === item
      })
      if(index!= -1){
        return true
      }else{
        return false
      }
    },
    selectAll(){
      this.checkedList = JSON.parse(JSON.stringify(this.list))//JSON.parse(JSON.stringify())解决引用
    },
    reverseSelect(){
      let parseChecked = []
      this.list.forEach(item=>{
        //判断原数组list的每一项，判断他们是否被选中，没被选中就push到这个parseChecked
        let index = this.checkedList.findIndex(ele=>{
          return ele === item
        })
        if(index==-1){
          parseChecked.push(item)
        }
      })
      //把所有的没被选中的parseChecked给checkedList
      this.checkedList = parseChecked
    }
  }
}
</script>

<style lang="less" scoped>
.ul{
  display: flex;
  padding: 15px;
  .li{
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid #999;
    margin-right: 10px;
    cursor: pointer;
    &.active{
      background: chocolate;
      color: #fff;
      border-color: chocolate;
    }
  }
}
.btns{
  padding: 15px;
  button{
    margin-right: 15px;
  }
}
</style>

代码要点：

1. 全选就是list所有的数据直接给checkedList
2. 反选就是把没被选中的拿出来，然后直接替换掉checkedList

以上写法适用于元素项为单一的字符串的情况，而且每一项字符串得唯一，适用于上次你的那个页面。通常情况下我们的项目的每一项会是{id:1,name:'闭月羞花‘}这种，我们需要给他添加上{id:1,name:'闭月羞花‘,isChecked:false}，下一篇文章会写，不急哈。

标签：index,return,反选,js,item,全选,选中,ele,checkedList
来源： https://blog.csdn.net/qq_32442973/article/details/121713993

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。