vue2.0+js实现自定义多选按钮

对于经常使用vue2.0+elementUI的小伙伴，业务中经常会遇见千奇百怪的多选样式，由于elementui组件的多选样式有一定的局限性，所以该代码能更好的解决具体开发需求

<template>
  <div class="big">
    <div class="multipleCheck">
      <span
        :class="checkArray.indexOf(item.id) > -1 ? 'check_item2' : 'check_item'"
        v-for="(item, index) in itemData"
        :key="index"
        @click="select(item)"
        >{{ item.name }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemData: [
        {
          name: "经济",
          id: 1,
        },
        {
          name: "法律",
          id: 2,
        },
        {
          name: "财政",
          id: 3,
        },
        {
          name: "管理",
          id: 4,
        },
        {
          name: "运营",
          id: 5,
        },
        {
          name: "金融",
          id: 6,
        },
      ],
      // 选中的值
      checkArray: [],
    };
  },
  methods: {
    select(row) {
      if (this.checkArray.indexOf(row.id) > -1) {
        this.checkArray.splice(this.checkArray.indexOf(row.id), 1);
      } else {
        this.checkArray.push(row.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.multipleCheck {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.check_item {
  padding: 5px 10px;
  color: #333;
  border: 1px solid #333;
  box-sizing: border-box;
  font-size: 14px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.check_item2 {
  padding: 5px 10px;
  color: #fff;
  border: 1px solid #409eff;
  box-sizing: border-box;
  font-size: 14px;
  margin-right: 10px;
  border-radius: 5px;
  background: #409eff;
  cursor: pointer;
}
</style>