当点击全部按钮显示所有状态为0和1的 点击未完成则显示状态为0 点击已完成则显示状态为1template div class=task-list1111 h1 class=title任务清单h1 hr todo-input add=addNewTasktodo-input el-table data=taskList border style=width 100

<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>