效果图
目录
引言：为什么要做部门职位选择器？
在本教程中，我们将创建一个简单的级联选择表单，让用户选择一个部门后，能够对应选择其下属的职位。这种选择器在很多实际项目中都非常实用，能帮助用户快速找到特定信息。通过这篇教程，你将学习如何用 Vue 实现数据绑定、选择更新以及动态显示选项。
步骤一：构建 HTML 页面结构
首先，让我们搭建基础 HTML 框架，并定义好 CSS 样式。下面的代码会创建出基本的页面布局，包括选择部门和选择职位的下拉菜单。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多层级选择示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
select {
width: 200px;
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<h2>选择部门和职位</h2>
<!-- 部门选择 -->
<label for="department">选择部门:</label>
<select v-model="selectedDepartment" @change="updatePositions">
<option v-for="dept in departments" :key="dept.id" :value="dept.id">{
{ dept.name }}</option>
</select>
<!-- 职位选择 -->
<label for="position">选择职位:</label>
<select v-model="selectedPosition">
<option v-for="pos in filteredPositions" :key="pos.id" :value="pos.id">{
{ pos.name }}</option>
</select>
<!-- 选择结果展示 -->
<div>
<p>选中的部门: {
{ selectedDepartment }}</p>
<p>选中的职位: {
{ selectedPosition }}</p>
</div>
</div>
</body>
</html>
步骤二：使用 Vue 实现数据绑定
接下来，为了让页面具备响应性，我们需要创建 Vue 实例并设置数据。在 <script> 标签中添加以下内容，为页面提供基础的数据和功能。
<script>
new Vue({
el: '#app',
data: {
departments: [
{
id: 1, name: '人事部' },
{
id: 2, name: '研发部' },
{
id: 3, name: '销售部' }
],
positions: {
1: [{
id: 1, name: '人事专员' }, {
id: 2, name: '招聘经理' }],
2: [{
id: 3, name: '开发工程师' }, {
id: 4, name: '产品经理' }],
3: [{
id: 5, name: '销售代表' }, {
id: 6, name: '销售经理' }]
},
selectedDepartment: null,
selectedPosition: null
}
});
</script>
代码解读：
departments定义了各部门的信息。positions定义了每个部门对应的职位列表。selectedDepartment和selectedPosition用于存储用户当前选择的部门和职位。
步骤三：设置级联选择逻辑
当用户选择一个部门后，我们需要动态更新职位列表。为此，我们可以借助 Vue 的计算属性和方法。
computed: {
// 计算当前选中部门的职位列表
filteredPositions() {
return this.selectedDepartment ? this.positions[this.selectedDepartment] : [];
}
},
methods: {
// 更新职位选择
updatePositions() {
this.selectedPosition = null; // 重置职位选择
}
}
说明：
filteredPositions是一个计算属性，用于动态计算positions中当前选择的部门对应的职位列表。updatePositions方法会在用户更换部门时执行，将已选择的职位重置为null。
步骤四：显示选择的结果
当用户选择部门和职位后，系统会自动展示用户的选择。结果展示区域已经在 HTML 中定义，只需利用 Vue 的数据绑定即可实时更新用户的选择结果：
<div>
<p>选中的部门: {
{ selectedDepartment }}</p>
<p>选中的职位: {
{ selectedPosition }}</p>
</div>
这个区域通过 {
{ selectedDepartment }} 和 {
{ selectedPosition }} 实现了绑定，使用户能实时看到选择的结果。
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多层级选择示例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
select {
width: 200px;
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<div id="app">
<h2>选择部门和职位</h2>
<label for="department">选择部门:</label>
<select v-model="selectedDepartment" @change="updatePositions">
<option v-for="dept in departments" :key="dept.id" :value="dept.id">{
{ dept.name }}</option>
</select>
<label for="position">选择职位:</label>
<select v-model="selectedPosition">
<option v-for="pos in filteredPositions" :key="pos.id" :value="pos.id">{
{ pos.name }}</option>
</select>
<div>
<p>选中的部门: {
{ selectedDepartment }}</p>
<p>选中的职位: {
{ selectedPosition }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
departments: [
{
id: 1, name: '人事部' },
{
id: 2, name: '研发部' },
{
id: 3, name: '销售部' }
],
positions: {
1: [{
id: 1, name: '人事专员' }, {
id: 2, name: '招聘经理' }],
2: [{
id: 3, name: '开发工程师' }, {
id: 4, name: '产品经理' }],
3: [{
id: 5, name: '销售代表' }, {
id: 6, name: '销售经理' }]
},
selectedDepartment: null,
selectedPosition: null
},
computed: {
filteredPositions() {
return this.selectedDepartment ? this.positions[this.selectedDepartment] : [];
}
},
methods: {
updatePositions() {
this.selectedPosition = null; // Reset selected position when department changes
}
}
});
</script>
</body>
</html>
总结：如何改进和扩展？
通过这篇文章，你已经学会了如何在 Vue 中实现级联选择器的基础逻辑。可以尝试进一步扩展这个示例，比如：
- 加入更多部门和职位：使用更丰富的数据结构。
- 设置默认选择：让页面加载时自动选中某些部门和职位。
- 保存选择结果：将用户选择的数据发送到后端或保存到本地。
希望本教程帮助你了解 Vue.js 和 HTML/CSS 的结合使用！