vue 自定义类似checkbox选中功能

<template>
  <div class="checkbox-item">
    <span ref="ct" @click="change">{{label}}</span>
  </div>
</template>
<script>
export default {
  name: 'checkbox-item',
  components: {},
  props: {
    label: String, // 名称
    list: Array // 选中数组
  },
  data () {
    return {
      isClick: false // 是否选中
    }
  },
  methods: {
    change () {
      // 点击事件 后改变当前选中内容样式
      if (this.isClick) {
        // 未选状态
        this.$refs.ct.style.color = ''
        this.$refs.ct.style.fontWeight = ''
        // 从选中内容数组中删除当前对象
        let index = this.list.findIndex(d => d == this.label)
        this.list.splice(index, 1)
        this.$emit('change-event', this.list)
      } else {
        // 已选选状态
        this.$refs.ct.style.color = 'black'
        this.$refs.ct.style.fontWeight = 'bold'
        // 添加当前对象到选中数组
        this.list.push(this.label)
        this.$emit('change-event', this.list)
      }
      this.isClick = !this.isClick
    },
    onClick (data) {
      // 父组件调用 设置默认选中值
      data.$refs.ct.style.color = 'black'
      data.$refs.ct.style.fontWeight = 'bold'
      data.isClick = true
      // 注释条件是判断当前对象是否已经存在 添加对象到选中数组中
      //   if (this.list.find(d => d == this.label) == null) {
      this.list.push(this.label)
      //   }
      this.$emit('change-event', this.list)
    },
    unClick (data) {
      // 父组件调用 清空选中（预配置功能 全清选中）
      this.$refs.ct.style.color = ''
      this.$refs.ct.style.fontWeight = ''
      data.isClick = false
      let index = this.list.findIndex(d => d == this.label)
      this.list.splice(index, 1)
      this.$emit('change-event', this.list)
    }
  }
}
</script>
<style lang="less" scoped>
.checkbox-item {
    text-align: center;
    span {
        cursor: pointer;
        color:#ccc;
        display:inline-block;
    }
    :hover {
        color:black;
        font-weight: bold;
    }
}
</style>

<template>
  <div class="checkbox-table">
    <el-row>
      <el-row :gutter="2">
        <el-col :span="4" style="text-align:center">
          <el-form-item>
            <span>使用类型:</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <checkbox-item label="自用" :list="checkedCitiesSelect" @change-event="handleCheckedCitiesChangeSelect"></checkbox-item>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <checkbox-item label="租用" :list="checkedCitiesSelect" @change-event="handleCheckedCitiesChangeSelect"></checkbox-item>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <checkbox-item label="混用" :list="checkedCitiesSelect" @change-event="handleCheckedCitiesChangeSelect"></checkbox-item>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="2">
        <el-col :span="4" style="text-align:center">
          <el-form-item>
            <span>应用行业:</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <div style="text-align:center;color: white;background: lightblue;">
              <span>港口建设</span>
            </div>
            <checkbox-item ref="checkboxItem" v-for="city in cities" :key="city" :label="city" :list="checkedCities" @change-event="handleCheckedCitiesChange"></checkbox-item>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <div style="text-align:center;color: white;background: lightblue;">
              <span>港口建设</span>
            </div>
            <checkbox-item ref="checkboxItem" v-for="city in cities" :key="city" :label="city" :list="checkedCities" @change-event="handleCheckedCitiesChange"></checkbox-item>
          </el-form-item>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import Mock from 'mockjs'
import checkboxItem from '../components/checkbox-item'
// 使用mock模拟数据
var data = Mock.mock({
  'list|20': [{
    'id|+1': /[a-z][A-Z][0-9]/
  }]
})
console.log(data)
const cityOptions = data.list.map(obj => { return obj.id })
export default {
  name: 'chechbox-table',
  components: { checkboxItem },
  props: {
    info: Array
  },
  data () {
    return {
      checkAll: false,
      checkedCities: [], // 选中的对象
      checkedCitiesSelect: [], // 筛选条件选中的对象
      cities: cityOptions // 数据集合
    }
  },
  mounted () {
    // 模拟初始化选中
    let checkList = ['gE4', 'qG1', 'jZ4', 'uN4', 'rQ1', 'dD4', 'kY2', 'yU3', 'pQ3']
    this.$options.methods.check.bind(this)(checkList)
  },
  methods: {
    check (lis) {
      if (lis != null) {
        // 设置选中
        this.$refs.checkboxItem.forEach((data, index) => {
          if (lis.find(d => d == data.label) != null) {
            data.onClick(data)
          }
        })
      }
    },
    handleCheckedCitiesChange (val) {
      // 子组件回调当前选中的内容
      console.log(val)
    },
    handleCheckedCitiesChangeSelect (val) {
      // 子组件回调当前选中的内容 筛选条件
      console.log(val)
    }
  }
}
</script>
<style lang="less" scoped>
.checkItem {
    .el-checkbox{
        display: table-row-group;
    }
}
#checkbox-table .el-form-item__label{
  text-align: center;
}
</style>

效果图