列表实现复选，并且复选框和点击内容分离

效果图

html部分 

<template>
  <ul>
    <li>
      <!--全选-->
      <a @click="clickAllCheck">
        <label for="allCheck">
          <input type="checkbox" id="allCheck" v-model="checked" />
          <span>全选</span>
        </label>
      </a>
    </li>
    <!--列表-->
    <li v-for="(item, index) in frameList" :key="index">
      <a @click="clickFrame(item)" :class="item.isactive?'on':''">
        <!--列表复选框-->
        <input type="checkbox" v-model="item.checked" :value="item.id" @click.stop=handleClick(item) />
        <!--列表文字-->
        <span>{{ item.lastname }}</span>
      </a>
    </li>
  </ul>
</template>

代码部分 

  data() {
    return {
      frameList: [
        { id: 1, lastname: 'abcdefg', checked: false, isactive: false },
        { id: 2, lastname: 'higklmn', checked: false, isactive: false },
        { id: 3, lastname: 'opqrst', checked: false, isactive: false },
        { id: 4, lastname: 'uvwxyz', checked: false, isactive: false }
      ], //select数据
      checkList: [], //已选数据id数组
      checked: false, //全选标志
    }
  },
  methods: {
    //全选
    clickAllCheck() {
      this.checked = !this.checked;
      //全选
      if (this.checked) {
        this.frameList.forEach(item => {
          item.checked = this.checked;
          this.checkList.push(item.id)
        })
      } else {
        //取消全选
        this.checkList = []
        this.frameList.forEach((item) => {
          item.checked = this.checked;
        })
      }
    },
    //点击文字
    clickFrame(item) {
      this.frameList.forEach(v => v.isactive = false)
      item.isactive = true//点击文字样式标红
      //点击文字的操作，如请求接口
      console.log(item)
    },
    //点击复选框
    handleClick(item) {
      item.checked = !item.checked
      //选中状态
      if (item.checked) {
        this.checkList.push(item.id)
      } else {
        //取消选中状态
        this.checkList.forEach((val, index) => {
          if (item.id == val)
            this.checkList.splice(index, 1)
        })
      }
      //全选标志判断
      if (this.checkList.length == this.frameList.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
  }