vue3-todolist （自带撸个Table和Datepicker组件）_自撸

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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,
    columnConfig: Array,
    align: String,
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32