按钮式多选组装-vue

LinDon_

已于 2023-04-14 11:30:32 修改

阅读量208

点赞数

分类专栏： VUE 文章标签： vue.js 前端

于 2023-04-14 11:24:44 首次发布

本文链接：https://blog.csdn.net/weixin_46252229/article/details/130149683

版权

VUE 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

组件

<template>
  <div>
    <el-button-group>
      <el-button
        style='margin-right: 15px'
        v-for="(btn, index) in buttons"
        :key="index"
        :type="value.includes(btn.value) ? 'primary' : ''"
        @click="toggleValue(btn.value)"
      >
        {{ btn.label }}
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'MyCheckbox',
  props: {
    value: Array,
    buttons: {
      type: Array,
      default: () => [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' },
          { label: '选项3', value: 'option3' }
      ]
    }
  },
  methods: {
    toggleValue(val) {
      if (this.value.includes(val)) {
        this.$emit('input', this.value.filter(v => v !== val))
      } else {
        this.$emit('input', [...this.value, val])
      }
    }
  }
}
</script>

页面使用

<template>
  <div>
    <my-checkbox v-model="selectedOptions" :button-arr="options"></my-checkbox>
  </div>
</template>

<script>
import MyCheckbox from '@/components/MyCheckbox.vue'

export default {
  components: { MyCheckbox },
  data() {
    return {
      selectedOptions: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        { label: '选项4', value: 'option4' },
        { label: '选项5', value: 'option5' }
      ]
    }
  }
}
</script>