vue实现人员选择

Vue 实现人员选择功能

在 Vue 中实现人员选择功能通常需要结合表单组件、列表展示和交互逻辑。以下是几种常见的实现方式：

使用下拉选择器（Select）

通过 Vue 的 v-model 绑定下拉选择器的值，结合 v-for 渲染人员列表：

<template>
  <select v-model="selectedPerson">
    <option v-for="person in personList" :key="person.id" :value="person">
      {{ person.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPerson: null,
      personList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  }
}
</script>

使用复选框（Checkbox）实现多选

通过 v-model 绑定数组实现多选：

<template>
  <div v-for="person in personList" :key="person.id">
    <input 
      type="checkbox" 
      :id="'person-' + person.id" 
      :value="person" 
      v-model="selectedPersons"
    >
    <label :for="'person-' + person.id">{{ person.name }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedPersons: [],
      personList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  }
}
</script>

使用第三方组件库

对于更复杂的需求，可以使用 Element UI、Ant Design Vue 等组件库：

<template>
  <el-select v-model="selectedPerson" placeholder="请选择人员">
    <el-option
      v-for="person in personList"
      :key="person.id"
      :label="person.name"
      :value="person">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedPerson: null,
      personList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  }
}
</script>

实现搜索过滤

为人员选择添加搜索功能：

<template>
  <input v-model="searchQuery" placeholder="搜索人员">
  <select v-model="selectedPerson">
    <option 
      v-for="person in filteredPersons" 
      :key="person.id" 
      :value="person"
    >
      {{ person.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedPerson: null,
      personList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  },
  computed: {
    filteredPersons() {
      return this.personList.filter(person => 
        person.name.includes(this.searchQuery)
      )
    }
  }
}
</script>

实现分页加载

对于大量人员数据，可以添加分页功能：

<template>
  <select v-model="selectedPerson">
    <option 
      v-for="person in currentPageData" 
      :key="person.id" 
      :value="person"
    >
      {{ person.name }}
    </option>
  </select>
  <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
  <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</template>

<script>
export default {
  data() {
    return {
      selectedPerson: null,
      personList: [
        // 大量人员数据
      ],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.personList.length / this.pageSize)
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.personList.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

实现树形人员选择

对于有层级关系的人员数据（如部门-人员），可以使用树形选择器：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    @check-change="handleCheckChange">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '部门A',
        children: [{
          id: 2,
          label: '张三'
        }, {
          id: 3,
          label: '李四'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleCheckChange(data, checked) {
      console.log('选中人员:', data, checked)
    }
  }
}
</script>

以上实现方式可以根据实际需求进行组合和扩展，满足不同场景下的人员选择功能。