任务清单管理系统 - Vue.js 开发

<template>
  <div class='task-list'>
    <h1 class='title'>任务清单</h1>
    <hr>
    <todo-input @add='addNewTask'></todo-input>
    <el-table :data='filteredTaskList' border style='width: 100%'>
      <el-table-column prop='id' label='ID' width='180' />
      <el-table-column prop='task' label='内容' width='180' />
      <el-table-column prop='done' label='状态' />
    </el-table>
    <el-button-group>
      <el-button type='全部' >全部</el-button>
      <el-button type='未完成'>未完成</el-button>
      <el-button type='已完成'>已完成</el-button>
    </el-button-group>
  </div>
</template>
<script>
import axios from 'axios';
import TodoList from '@/components/TaskList/TodoList';
import TodoInput from '@/components/TaskList/TodoInput';
import TodoButton from '@/components/TaskList/TodoButton';
// import {nextTick} from 'vue';

export default {
  name: 'TaskList',
  data() {
    return {
      taskList: [],
      nextId: 0,
      activeBtnIndex: 0
    };
  },
  mounted() {
    this.fetchTaskList();
  },
  computed: {
    filteredTaskList() {
      switch (this.activeBtnIndex) {
        case 1:
          return this.taskList.filter(task => task.done);
        case 2:
          return this.taskList.filter(task => !task.done);
        default:
          return this.taskList.filter(task => !task.done); // 只展示状态码为0的任务
      }
    }
  },
  methods: {
    fetchTaskList() {
      this.$net.get('task/findAllTask').then(resp => {
        resp.data.data.records.forEach(item => {
          if (item.state === 0) {
            item.state = '未完成';
            item.done = false; // 将 state 为 0 的任务设置为未完成
          } else {
            item.state = '已完成';
            item.done = true; // 将 state 不为 0 的任务设置为已完成
          }
        });
        this.taskList = resp.data.data.records;
      });
    },
    addNewTask(taskName) {
      this.taskList.push({
        id: this.nextId,
        task: taskName,
        done: false
      });
      this.nextId++;
    }
  },
  components: {
    TodoList,
    TodoInput,
    TodoButton
  }
};
</script>
<style scoped>
.task-list {
  width: 600px;
  height: 600px;
  border: 5px solid white;
  margin-top: 100px;
  margin-left: 400px;
}

.title {
  text-align: center;
}

/*.task-list__list {*/
/*  margin-top: 2rem;*/
/*}*/
</styl