vue实现列表选择

实现基础列表选择功能

在Vue中实现列表选择可以通过v-model绑定选中的值，结合v-for渲染列表选项。以下是一个基础实现示例：

<template>
  <div>
    <select v-model="selectedItem">
      <option 
        v-for="item in items" 
        :key="item.value" 
        :value="item.value"
      >
        {{ item.text }}
      </option>
    </select>
    <p>当前选择: {{ selectedItem }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: '',
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

使用复选框实现多选列表

对于需要多选的情况，可以使用复选框组：

<template>
  <div>
    <div v-for="item in items" :key="item.value">
      <input 
        type="checkbox" 
        :id="item.value" 
        :value="item.value" 
        v-model="selectedItems"
      >
      <label :for="item.value">{{ item.text }}</label>
    </div>
    <p>已选择: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

自定义样式列表选择

使用CSS自定义选择列表样式，可以创建更美观的UI：

<template>
  <div class="custom-select">
    <div 
      class="selected-item" 
      @click="isOpen = !isOpen"
    >
      {{ selectedItem.text || '请选择' }}
    </div>
    <div class="options" v-show="isOpen">
      <div 
        v-for="item in items" 
        :key="item.value" 
        @click="selectItem(item)"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedItem: {},
      items: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
      this.isOpen = false
    }
  }
}
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.selected-item {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
}
.options div {
  padding: 8px;
  cursor: pointer;
}
.options div:hover {
  background: #f0f0f0;
}
</style>

使用第三方组件库

对于更复杂的需求，可以考虑使用第三方UI库如Element UI或Vuetify：

<template>
  <!-- Element UI示例 -->
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <!-- Vuetify示例 -->
  <v-select
    v-model="selected"
    :items="items"
    label="标准选择"
    dense
  ></v-select>
</template>

性能优化建议

对于大型列表，考虑使用虚拟滚动技术避免渲染所有选项：

<template>
  <div style="height: 300px">
    <RecycleScroller
      class="scroller"
      :items="largeList"
      :item-size="32"
      key-field="id"
      v-slot="{ item }"
    >
      <div @click="selectItem(item)">
        {{ item.name }}
      </div>
    </RecycleScroller>
  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      largeList: Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        name: `项目 ${i}`
      }))
    }
  }
}
</script>