vue实现人员选择
Vue 实现人员选择功能
在 Vue 中实现人员选择功能，通常需要结合表单元素和组件化开发。以下是几种常见的实现方式：
使用下拉选择框（Select）
<template>
<select v-model="selectedPerson">
<option v-for="person in people" :value="person.id" :key="person.id">
{{ person.name }}
</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedPerson: null,
people: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
}
}
</script>使用复选框（Checkbox）实现多选
<template>
<div v-for="person in people" :key="person.id">
<input
type="checkbox"
:id="'person-' + person.id"
:value="person.id"
v-model="selectedPeople"
>
<label :for="'person-' + person.id">{{ person.name }}</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedPeople: [],
people: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
}
}
</script>使用第三方组件库
对于更复杂的人员选择需求，可以使用第三方组件库：
-
Element UI 的 Select 组件：
<el-select v-model="selectedPerson" placeholder="请选择"> <el-option v-for="person in people" :key="person.id" :label="person.name" :value="person.id"> </el-option> </el-select> -
Vuetify 的 Autocomplete 组件：
<v-autocomplete v-model="selectedPerson" :items="people" item-text="name" item-value="id" label="选择人员" ></v-autocomplete>
实现搜索过滤功能
对于大量人员数据，可以添加搜索过滤：
<template>
<input v-model="searchQuery" placeholder="搜索人员">
<select v-model="selectedPerson">
<option
v-for="person in filteredPeople"
:value="person.id"
:key="person.id"
>
{{ person.name }}
</option>
</select>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
selectedPerson: null,
people: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
}
},
computed: {
filteredPeople() {
return this.people.filter(person =>
person.name.includes(this.searchQuery)
)
}
}
}
</script>实现分页加载
对于超大数据集，可以添加分页功能：
<template>
<select v-model="selectedPerson">
<option
v-for="person in visiblePeople"
:value="person.id"
:key="person.id"
>
{{ person.name }}
</option>
</select>
<button @click="loadMore">加载更多</button>
</template>
<script>
export default {
data() {
return {
selectedPerson: null,
pageSize: 10,
currentPage: 1,
people: [
// 大量人员数据
]
}
},
computed: {
visiblePeople() {
return this.people.slice(0, this.pageSize * this.currentPage)
}
},
methods: {
loadMore() {
this.currentPage++
}
}
}
</script>实现树形选择
对于有层级关系的人员组织，可以使用树形选择：
<template>
<tree-select
v-model="selectedPeople"
:options="peopleTree"
:multiple="true"
placeholder="选择人员"
/>
</template>
<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { TreeSelect },
data() {
return {
selectedPeople: [],
peopleTree: [
{
id: 'dept1',
label: '部门A',
children: [
{ id: 1, label: '张三' },
{ id: 2, label: '李四' }
]
},
{
id: 'dept2',
label: '部门B',
children: [
{ id: 3, label: '王五' }
]
}
]
}
}
}
</script>这些方法可以根据实际需求组合使用，构建出适合项目的人员选择功能。对于更复杂的需求，可能需要结合后端API实现异步加载和搜索功能。
