vue 多选实现思路

多选框组件实现

使用Vue内置的v-model指令绑定数组类型数据，当选中多个选项时，会自动将值添加到数组中

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedValues" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' }
      ],
      selectedValues: []
    }
  }
}
</script>

自定义多选组件封装

创建可复用的多选组件，支持自定义样式和功能扩展

<template>
  <div class="multi-select">
    <div 
      class="select-option"
      v-for="item in options"
      :key="item.value"
      @click="toggleSelect(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  methods: {
    toggleSelect(item) {
      const selected = [...this.value]
      const index = selected.indexOf(item.value)

      index === -1 
        ? selected.push(item.value) 
        : selected.splice(index, 1)

      this.$emit('input', selected)
    },
    isSelected(item) {
      return this.value.includes(item.value)
    }
  }
}
</script>

结合Element UI实现

使用Element UI的el-checkbox-group组件快速实现多选功能

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox 
      v-for="city in cities" 
      :label="city" 
      :key="city"
    >
      {{ city }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      cities: ['上海', '北京', '广州', '深圳'],
      checkedCities: []
    }
  }
}
</script>

多选表格实现

在表格中实现多选功能，通常需要配合全选/反选操作

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    toggleSelection(rows) {
      rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    }
  }
}
</script>

多选搜索过滤

实现可搜索的多选功能，提升用户体验

<template>
  <div>
    <el-input 
      v-model="searchText" 
      placeholder="搜索选项"
    ></el-input>

    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox 
        v-for="item in filteredOptions" 
        :label="item.value" 
        :key="item.value"
      >
        {{ item.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [...],
      selectedOptions: [],
      searchText: ''
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.label.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
}
</script>