vue - 实现单选和多选

冷不防 2021-08-13 21:47 622阅读 0赞

#### 1、效果图： ####

![在这里插入图片描述][20190920151509779.gif]

#### 2、具体实现过程： ####

<template>
      <div class="demo">
        <div :class="allChecked?'circle-full':'circle'" @click="radio('all')"></div>
        <div class="items" v-for="(item,index) in list" :key="index">
          <span :class="item.checked?'circle-full':'circle'" @click="radio('item',index)"></span>
          <span class="name">{
       {item.name}}</span>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          list: [
            {
              checked: false,
              name: "1"
            },
            {
              checked: false,
              name: "2"
            },
            {
              checked: false,
              name: "3"
            },
            {
              checked: false,
              name: "4"
            }
          ],
          allChecked: false,
          checkedList: []
        };
      },
      methods: {
        radio(type, index) {
          if (type === "item") {   //  单选
            this.list[index].checked = !this.list[index].checked;
            if (this.list[index].checked) {
              this.checkedList.push(this.list[index]);
            } else {
              this.checkedList.find((item, indexs) => {
                if (item == this.list[index]) {
                  this.checkedList.splice(indexs, 1);
                }
              });
            }
            if (this.checkedList.length == this.list.length) {
              this.allChecked = true;
            } else {
              this.allChecked = false;
            }
          } else {  // 多选
            let checked = !this.allChecked;
            this.list.forEach(item => {
              item.checked = checked;
            });
            this.allChecked = checked;
            if (checked) {
              this.checkedList = [];
            }
          }
        }
      }
    };
    </script>
    <style lang="less" scoped>
    .demo {
      padding: 50px;
    }
    
    .items {
      padding-top: 20px;
      height: 20px;
      line-height: 20px;
      text-align: left;
      display: flex;
    }
    .circle-full {
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      border-radius: 50%;
      background-color: red;
    }
    .circle {
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      border-radius: 50%;
    }
    
    .name {
      padding-left: 20px;
      font-size: 20px;
    }
    </style>

[20190920151509779.gif]: /images/20210813/cf40d5a9069b4e379f807a678faea5b8.png