当前位置：首页 > VUE

vue实现选人

2026-01-13 03:07:19VUE

实现选人功能的基本思路

在Vue中实现选人功能通常涉及以下几个关键点：人员数据管理、选择交互逻辑、选人组件封装以及数据传递。以下是具体实现方法：

数据准备与状态管理

创建人员数据数组，通常包含id、name等字段：

data() {
  return {
    peopleList: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' }
    ],
    selectedPeople: []
  }
}

基础选择实现

使用v-for渲染人员列表，配合v-model或事件处理实现选择：

<div v-for="person in peopleList" :key="person.id">
  <input 
    type="checkbox" 
    :value="person.id" 
    v-model="selectedPeople"
  >
  {{ person.name }}
</div>

组件化封装

创建可复用的选人组件PersonSelector.vue：

<template>
  <div class="person-selector">
    <div 
      v-for="person in list" 
      :key="person.id"
      @click="toggleSelect(person)"
      :class="{ selected: isSelected(person) }"
    >
      {{ person.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['list', 'value'],
  methods: {
    toggleSelect(person) {
      const selected = [...this.value]
      const index = selected.findIndex(p => p.id === person.id)

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

      this.$emit('input', selected)
    },
    isSelected(person) {
      return this.value.some(p => p.id === person.id)
    }
  }
}
</script>

使用组件

父组件中使用并绑定选人数据：

<person-selector 
  :list="peopleList" 
  v-model="selectedPeople"
></person-selector>

高级功能扩展

实现搜索过滤功能：

computed: {
  filteredList() {
    return this.peopleList.filter(person => 
      person.name.includes(this.searchKey)
    )
  }
}

添加多选/单选模式支持：

props: {
  mode: {
    type: String,
    default: 'multiple', // 或'single'
    validator: value => ['multiple', 'single'].includes(value)
  }
}

与后端交互

实现异步加载人员数据：

async loadPeople() {
  try {
    const res = await axios.get('/api/people')
    this.peopleList = res.data
  } catch (error) {
    console.error('加载人员列表失败', error)
  }
}

样式优化

添加基础交互样式：

vue实现选人

.person-selector div {
  padding: 8px;
  cursor: pointer;
}

.person-selector div.selected {
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

以上实现方案可根据实际需求进行组合调整，组件化封装使得选人功能可以在不同场景复用，状态管理确保数据流动清晰，扩展功能满足更多业务场景需求。