vue3-todolist
0. 前言
之前已经学了一波vue3,笔记在vue3学习笔记
想直接看代码的可以去github
1. 实现效果
2. 需求分析
1. 模块功能分析
- 列表展示(静态展示 + 状态修改)
- table静态展示
- table支持自定义列 (自定义slot的插入)
- 事件录入(控制部分)
- 自定义的input输入框
- 日期选择器
2. 组件分析
通过上面的分析,我们需要撸的组件大概有这么几个:
- table
- button
- input
- datepicker
好了需求明确了,废话不多说开干~冲冲冲
3. 一个简单的Table组件
1. 打算怎么使用?
以前使用的React Table组件好像都是类似这么写的,就是指定对应的数据源,然后我们通过对每一列Column的配置,他会将对应列行的每一列去取得对应的字段填上去,emmmmmm我就要这种~
<SimpleTable :dataSource="todoList" :columnConfig="column" />
<script>
export default {
setup() {
return {
column: [{
title: "待办事项",
key: "title",
},
{
title: "目标",
key: "target",
},
{
title: "起始时间",
key: "startTime",
width: "150px",
},
{
title: "结束时间",
key: "endTime",
width: "150px",
},
// 下面这个两个添加slot的,我们2.0版本用,后面为了不重复复制这段先放着
{
title: "状态",
slot: "status",
},
{
title: "操作",
slot: "action",
width: "200px",
},
]
}
}
}
</script>
2. 开始1.0版本
目标:
- table列宽可定制 -> 通过colgroup指定对应的col的宽度
- 每一列的title可定制 -> 通过thead 中的 th指定对应的header的名就好了
- 每一列能根据传入的key从data中拿数据,在tbody的tr和td中遍历key就行了
<template>
<table class="table">
<colgroup>
<col v-for="item in columns" :key="item.key" :aria-colspan="item.span || 1" :width="item.width || '100px'" />
</colgroup>
<thead class="table-head">
<th scope="col" v-for="(item, index) in columns" :key="'header -' + index">
{
{ item.title }}
</th>
</thead>
<tbody>
<tr v-for="(data, index) in tableData" :key="'tabledata' + index">
<td v-for="(item, i) in columns" :key="'tabledata - index' + i">
{
{ data[item.key] }}
</td>
</tr>
</tbody>
</table>
</template>
<script>
import {
reactive,
watchEffect
} from "vue";
export default {
props: {
dataSource: Array,
colu