基于Vue2 + Element 实现任务列表管理功能的详细教程

前言：本文介绍的是如何从0开始搭建Vue2项目到1实现对任务添加、删除和筛选的功能，🔗 相关链接Vue 入门(安装与应用超详细教程)

❤ 【作者主页—📚优质文章、获取更多优质源码】

一 . 项目搭建

1.1 安装node.js

1.2 配置环境变量

1.3 创建Vue项目

二. 打开项目

三. 运行项目

四. 项目展示

五. 更多干货

一 . 项目搭建

1.1 安装node.js

官网：下载 | Node.js 中文网，根据自己的系统进行选择

下载完成之后，将.zip文件进行解压，然后 win+R 输入cmd输出node -v，有版本号即安装成功

1.2 配置环境变量

右键此电脑选择属性->高级系统设置->环境变量->系统变量->双击Path->新建->输入解压后的文件夹路径，如D:\env\node-v22.15.0-win-x64\node-v22.15.0-win-x64，最后一定要点击三次确定

1.3 创建Vue项目

使用 Vue CLI 创建项目，右键命令提示符，选择以管理员身份运行，执行以下命令

npm install -g @vue/cli
vue create todo-list # 创建一个名为todo-list的Vue项目

下一步进入项目目录

cd todo-list

安装 Vue 2

npm install vue@2

在项目目录下安装 Element UI

npm i element-ui -S

执行完以上步骤后，创建Vue项目完成，如下图所示

二. 打开项目

使用vscode、hbuilder等工具打开都可以，目录结构如下

在 main.js 中引入 Element UI，打开src/main.js，添加以下代码

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

接着编写App.vue，添加以下<template>部分代码

<template><div id="app"><h3>To Do List</h3><el-form :inline="true" class="add-task-form"><el-form-item><el-select v-model="selectedType" placeholder="请选择类型！"><el-option label="普通任务" value="normal"></el-option><el-option label="重要任务" value="important"></el-option><el-option label="紧急任务" value="urgent"></el-option></el-select></el-form-item><el-form-item><el-input v-model="newTask" placeholder="请输入新的任务！"></el-input></el-form-item><el-form-item><el-button type="primary" @click="addTask">添加任务</el-button></el-form-item></el-form>.....................................
</template>

el-form是 Element UI 的表单组件，:inline="true"使其内联显示，el-form-item是表单项组件，el-select是下拉选择框，v-model="selectedType"将用户选择的值绑定到 Vue 实例的selectedType数据属性上，el-option是下拉选项，el-input是输入框，v-model="newTask"将用户输入的值绑定到newTask数据属性，el-button是按钮，type="primary"设置为主要按钮样式，@click="addTask"绑定了点击事件，点击时调用addTask方法。

接着写以下任务列表表格的实现代码

<template>...........此处代码省略，衔接上个代码块................<el-table :data="filteredTasks" border style="width: 100%"><el-table-column prop="name" label="任务名称"></el-table-column><el-table-column label="任务类型"><template #default="scope"><el-tag :type="getTagType(scope.row.type)">{{scope.row.type}}</el-tag></template></el-table-column><el-table-column label="任务状态"><template #default="scope"><el-tag :type="getTagStatusType(scope.row.status)">{{scope.row.status}}</el-tag></template></el-table-column><el-table-column label="操作"><template #default="scope"><el-button size="mini" icon="el-icon-check" @click="completeTask(scope.row)" v-if="scope.row.status === '未完成'"></el-button><el-button size="mini" type="primary" icon="el-icon-edit" @click="editTask(scope.row)"></el-button><el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteTask(scope.row)"></el-button></template></el-table-column></el-table>................................
</template>

el-table是表格组件，:data="filteredTasks"绑定了要展示的数据，filteredTasks是计算属性，通过el-tag组件展示任务类型和状态，并根据不同类型调用getTagType和getTagStatusType方法设置标签样式。“操作” 列包含三个按钮

接下来添加以下任务统计信息和筛选框的代码

<template>...................................<div class="task-summary">共{{tasks.length}}项任务 已完成{{completedTasks.length}}项任务 未完成{{uncompletedTasks.length}}项任务</div><el-row class="filter-row"><el-col :span="8"><el-select v-model="filterType" placeholder="选择类型！"><el-option label="全部" value="all"></el-option><el-option label="普通任务" value="normal"></el-option><el-option label="重要任务" value="important"></el-option><el-option label="紧急任务" value="urgent"></el-option></el-select></el-col><el-col :span="8"><el-select v-model="filterStatus" placeholder="选择状态！"><el-option label="全部" value="all"></el-option><el-option label="已完成" value="已完成"></el-option><el-option label="未完成" value="未完成"></el-option></el-select></el-col></el-row></div>
</template>

div标签展示任务统计信息，通过插值表达式（{{}}）展示任务总数、已完成任务数和未完成任务数，el-row和el-col是 Element UI 的栅格布局组件，用于排版。两个el-select下拉框分别用于筛选任务类型和任务状态，v-model绑定对应数据属性，实现筛选功能。

接下来添加以下script代码，定义了组件的数据、计算属性和方法

<script>
export default {data() {return {newTask: '',selectedType: '',tasks: [{ name: '任务1', type: 'normal', status: '已完成' },{ name: '任务2', type: 'important', status: '未完成' },{ name: '任务3', type: 'urgent', status: '已完成' }],filterType: 'all',filterStatus: 'all'}},computed: {filteredTasks() {return this.tasks.filter(task => {const typeMatch = this.filterType === 'all' || task.type === this.filterType;const statusMatch = this.filterStatus === 'all' || task.status === this.filterStatus;return typeMatch && statusMatch;});},completedTasks() {return this.tasks.filter(task => task.status === '已完成');},uncompletedTasks() {return this.tasks.filter(task => task.status === '未完成');}},methods: {addTask() {if (this.newTask.trim()!== '') {this.tasks.push({name: this.newTask,type: this.selectedType,status: '未完成'});this.newTask = '';this.selectedType = '';}},completeTask(task) {task.status = '已完成';},editTask(task) {console.log('编辑任务', task);},deleteTask(task) {const index = this.tasks.indexOf(task);if (index > -1) {this.tasks.splice(index, 1);}},getTagType(type) {switch (type) {case 'normal':return 'info';case 'important':return 'warning';case 'urgent':return 'danger';default:return 'info';}},getTagStatusType(status) {return status === '已完成'? 'green' : 'default';}}
}
</script>

最后，定义了组件内一些元素的局部样式，给添加任务表单、筛选框所在行和任务统计信息区域设置了外边距等样式

<style scoped>
.add-task-form {margin-bottom: 20px;
}
.filter-row {margin-top: 20px;
}
.task-summary {text-align: right;margin-top: 10px;
}
</style>

三. 运行项目

在项目的根目录下执行以下命令，如下图项目启动成功，然后浏览器访问 http://localhost:8080/

npm run serve

四. 项目展示

进入页面后默认显示任务1、2、3 ，以下任务4、5、6是我添加的，如下图所示

下图是以任务类型进行的一级筛选

下图是以任务类型和未完成的任务进行的二级筛选

五. 更多干货

--------------------- - -----✈--------- ---------✈--------------------✈-------
1.如果我的博客对你有帮助或你喜欢我的博客内容，请 “👍点赞” “✍️评论” “★收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、HTML模板、微信小程序模板、等! 「在这里一起探讨知识，互相学习」！

3.以上内容技术相关问题✉欢迎一起交流学习 ☟ ☟ ☟
————————————————