使用 Vue3 + elementPlus 做一个每日习惯打卡表

使用 Vue3 + elementPlus 做一个每日习惯打卡表 github 链接

最新代码会在 github 更新

最近在看《富兰克林自传》，看到一篇文章叫《13个成就一生的习惯》，大致如下：

光想着不做坏事情无法避免坏事情发生，必须将那些坏习惯打破，然后建立起好的习惯，这样才能始终如一地做正确的事

人们对于相同的道德品行可能有着不同的看法，比如有人把“节制”看作限制饮食，也有人将其外延扩大，认为它代表的含义包括调控欲望、癖好和肉体上或精神上的情欲，甚至将其外延扩大到野心方面

为了明晰其意，遂在每一条法则下面作一些注释，用以解释并限定这个词语的外延

一开始先密切注意“节制”这一习惯，而对于其他习惯，只是记录下过失
一周之后，如果发现“节制”这一习惯没有红色，就认为这一习惯已经牢固了（单个突破）
正如一个人替花园除草，他不能妄想一次就消灭所有的野草，这样超过了他的能力
如果他在一段时间内只对付一片草地，在解决一片草地后再接着解决下一片，那么工作就会更加有效

---

为了每天自省，结合自身情况做出修改，遂做了如下项目 ，截图如下

创建项目

首先，创建项目

npm init vite <project-name> --template vue
cd <project-name>
npm install
npm i element-plus
npm run dev

我的 project-name 叫 good_habits，项目结构如下

配置 main.js

import {
    createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

App.vue

<template>
  <HabitTable />
</template>

<script setup>
import HabitTable from "./components/HabitTable.vue";
</script>

<style>
* {
     
  margin: 0px;
  padding: 0px;
}
</style>

HabitTable.vue

<template>
    <DialogNoReason ref="NoReason" />
    <el-table :data="displayData" class="el_table">
        <el-table-column>
            <template #header>
                <div id="handleDate">
                    <el-button @click="aExportData(startvalue, tableData)" size="mini"
                               >导出数据</el-button
                        >
                    <el-button
                               @click="clearLocalStorage"
                               size="mini"
                               style="margin-top: 10px; margin-left: 0px"
                               >清除数据</el-button
                        >
                </div>
            </template>
            <!-- the :data="tableData" has a key : data -->
            <el-table-column prop="date" width="128">
                <template #header>
                    <div id="data_header">
                        <p>起始日期</p>
                        <!--  startvalue is watched -->
                        <el-date-picker
                                        v-model="startvalue"
                                        placeholder="起始日期"
                                        prefix-icon="null"
                                        size="mini"
                                        style="width: 95px"
                                        >
                        </el-date-picker>
                    </div>
                </template>
            </el-table-column>
        </el-table-column>

        <!-- habit name -->
        <el-table-column v-for="habit in habits" :label="habit.name">
            <!--  habit explain -->
            <el-table-column :label="habit.explain">
                <!-- the main content -->
                <template #default="scope">
                    <div id="inner_button">
                        <!-- the yes button -->
                        <el-button
                                   @click="handleYes(scope.row, habit.name)"
                                   size