elementui todolist

ElementUI 实现 TodoList

使用 ElementUI 实现一个简单的 TodoList 应用，可以结合 Vue.js 框架进行开发。以下是具体实现步骤：

1. 安装 ElementUI

确保已安装 Vue.js 项目后，通过 npm 或 yarn 安装 ElementUI：

npm install element-ui

2. 引入 ElementUI

在 main.js 中引入 ElementUI 及其样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建 TodoList 组件

新建一个 Vue 组件（如 TodoList.vue），包含以下核心功能：

• 输入框添加任务
• 任务列表展示
• 标记完成/删除任务

<template>
  <div class="todo-list">
    <el-input
      v-model="newTask"
      placeholder="输入任务内容"
      @keyup.enter.native="addTask"
    >
      <el-button slot="append" @click="addTask">添加</el-button>
    </el-input>

    <el-divider></el-divider>

    <el-card>
      <el-table :data="tasks" style="width: 100%">
        <el-table-column prop="content" label="任务内容"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.completed ? 'success' : 'info'">
              {{ scope.row.completed ? '已完成' : '未完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="toggleComplete(scope.$index)"
              :type="scope.row.completed ? 'warning' : 'success'"
            >
              {{ scope.row.completed ? '取消完成' : '标记完成' }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="removeTask(scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({
          content: this.newTask,
          completed: false
        });
        this.newTask = '';
      }
    },
    toggleComplete(index) {
      this.tasks[index].completed = !this.tasks[index].completed;
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

4. 样式优化

根据需要添加自定义样式：

<style scoped>
.todo-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

5. 功能扩展建议

• 添加本地存储功能，使用 localStorage 持久化任务数据
• 增加任务分类筛选功能
• 实现任务优先级设置
• 添加任务完成时间统计

6. 注意事项

• 确保 Vue 版本与 ElementUI 兼容
• 对于复杂场景，可以考虑使用 Vuex 进行状态管理
• 移动端适配可能需要额外调整样式

以上实现提供了一个基础的 TodoList 功能，可以根据实际需求进一步扩展和完善。