任务清单管理系统：使用 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='content' label='内容' width='180' />
      <el-table-column prop='state' label='状态' />
    </el-table>
    <el-button-group>
      <el-button @click='activeBtnIndex = 0' :type='activeBtnIndex === 0 ? 'primary' : '''>全部</el-button>
      <el-button @click='activeBtnIndex = 1' :type='activeBtnIndex === 1 ? 'primary' : '''>未完成</el-button>
      <el-button @click='activeBtnIndex = 2' :type='activeBtnIndex === 2 ? 'primary' : '''>已完成</el-button>
    </el-button-group>
  </div>
</template>
<script>
import axios from 'axios';
import TodoInput from '@/components/TaskList/TodoInput';

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.state === 0);
        case 2:
          return this.taskList.filter(task => task.state === 1);
        default:
          return this.taskList;
      }
    }
  },
  methods: {
    fetchTaskList() {
      axios.get('http://localhost:8888/task/findAllTask')
          .then(response => {
            this.taskList = response.data.data.records;
            this.nextId = response.data.data.total
          })
          .catch(error => {
            console.log(error);
          });
    },
    addNewTask(taskName) {
      axios.post('http://localhost:8888/task/addTask', {
        content: taskName,
        state: 0
      }).then(response => {
        this.taskList.push(response.data.data);
        this.nextId++;
      }).catch(error => {
        console.log(error);
      });
    }
  },
  components: {
    TodoInput
  }
};
</script>
<style scoped>
.task-list {
  width: 600px;
  height: 600px;
  border: 5px solid white;
  margin-top: 100px;
  margin-left: 400px;
}

.title {
  text-align: center;
}
</style>