前言
之前实现了一个计划看板实战项目, 感觉像是已完成了, 不过细细想来, 还是差了点东西.
首先就是没办法新增一个计划.
其次就是没办法分门别类的去查看计划.
因为现在展示的是所有计划, 但是实际上有时候只想要看某种状态下的计划.
怎么添加计划
先讲讲怎么添加计划, 添加计划还是可以使用之前的模态框组件, 点击界面上的一个添加按钮, 就弹出这个模态框进行添加就可以了.
不过这个按钮展示在哪里呢?
在决定按钮放哪里之前, 我们先在所有计划的上面添加一个tab切换栏, 通过这个切换栏, 可以切换查看不同状态的计划.
封装tabs组件
组件的基本用法如下.
<script setup>
import ZdpTabs1 from "@/zdpui/components/ZdpTabs1.vue";
const tabs = [
{label: 'Tab 1', name: 'tab1'},
{label: 'Tab 2', name: 'tab2'},
{label: 'Tab 3', name: 'tab3'}
];
const onTabChange = (index, tab) => {
console.log('Tab changed:', index, tab);
};
</script>
<template>
<ZdpTabs1
:tabs="tabs"
@click="onTabChange"
/>
</template>
效果如下.
在这里插入图片描述
接下来, 我们把它整合到计划列表组件里面去.
优化看板页面
经过一番调整以后, 界面效果如下.
在这里插入图片描述
核心就是整合了tabs组件的功能.
在这里插入图片描述
现在应该想办法解决怎么切换状态的问题了.
实际上在这个change事件里面, 我们可以根据状态去筛选数据.
我们来简单的写一下代码.
根据状态筛选数据
将change的代码改为下面的样子.
在这里插入图片描述
这个时候, 界面就实现根据tab切换的效果了.
在这里插入图片描述
不过此时会有另一个问题, 那就是之前的删除时根据索引去删除的, 一旦分组以后, 这个索引就不是正确的元素索引了.
有个简单的办法就是用tabTasks替换原本的tasks.
在这里插入图片描述
这种方案经过测试确实是没有问题的.
接下来, 我们把代码封装成组合式API.
封装组合式API
关于tab相关的操作, 我封装成了组合式API.
在这里插入图片描述
经过实测, 这样封装是可以的.
添加计划
那么接下来就剩下添加计划这个功能了.
我们希望点击添加计划的时候弹出一个对话框, 这个对话框中有计划相关的表单, 填写表单, 然后点击确认, 可以将计划内容填充到计划列表里面去, 同时tab切换为所有, 第一条显示我们刚刚添加的计划.
点击添加按钮, 弹出对话框.
在这里插入图片描述
输入要添加的内容, 然后点确认.
在这里插入图片描述
可以发现第一条就是了, 一切都比较符合预期, 非常帅啊!!!
实现修改功能
那么修改能不能行呢?
还不行, 我们去修改一下.
稍微修改以后, 修改功能也实现了.
在这里插入图片描述
核心就是在点击对话框的时候, 将当前计划的信息保存到表单中.
在这里插入图片描述
总结
到目前为止, 这个计划看板终于又进一步完善了.
目前有了新增的功能, 也有了根据状态进行tab切换的功能.
删除功能也基本算有了.
宝子们，我在 Python 的世界里摸爬滚打十余载，积累了不少心得体会。如今想把这些年的经验和知识毫无保留地分享给有缘的小伙伴。要是你对 Python 学习感兴趣，欢迎来试听一二，也可以随时在评论区留言或者私信我，咱们一起探讨，共同进步，开启 Python 学习的奇妙之旅！
人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...
