html+vue+elementplus实现待办事项的持久化存储

最新推荐文章于 2024-02-13 06:03:17 发布

高中不复，大学纷飞

最新推荐文章于 2024-02-13 06:03:17 发布

阅读量636

点赞数

分类专栏：毕设总结系列文章标签： vue.js html elementui

本文链接：https://blog.csdn.net/qq_44760912/article/details/127111402

版权

毕设总结系列专栏收录该内容

6 篇文章 1 订阅

订阅专栏

实现功能：导入vue和elementplus的在线cdn构建单页面html文件，实现待办事项的增删以及持久化存储

实现代码：

todolist.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办任务列表</title>
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <script src="storage.js"></script>
    <style>
        .el-table .display-row {
            display: none;
        }

        /* .el-table:deep(.el-table__header) col[name=gutter] {
            display: table-cell !important;
        } */
    </style>
</head>

<body>
    <div id="Application">
        <!-- 输入框元素，用来新建待办任务 -->
        <el-form @submit.prevent="addTask" :inline="true" :style="styleForm">
            <el-form-item label="">
                <el-input v-model="taskText" class="w-50 m-2" placeholder="请输入任务..." autofocus="true"
                    @keydown="keyclick($event)" style="width:320px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addTask">新建任务</el-button>
            </el-form-item>
        </el-form>
        <template v-if="todos.length != 0">
            <h2>待完成</h2>
            <!-- :row-class-name="tableClass" -->
            <el-table :data="todos" style="width: 100%;" ref="multipleTableRef" align="center"
                @selection-change="handleSelectionChange" :table-layout="auto" :row-class-name="tableClass"
                :header-cell-style="{'background':'#eef1f6','color':'#606266','text-align': 'center'}"
                :cell-style="{'text-align':'center'}">
                <el-table-column type="index" width="50">

                </el-table-column>
                <el-table-column type="selection" width="100">

                </el-table-column>
                <el-table-column prop="taskText" label="待办任务" width="240">
                </el-table-column>
                <el-table-column label="完成状态" width="120">
                    <template #default="scope">
                        <input type="checkbox" v-model='scope.row.checked' @change="savetodos(scope.row.checked)" v-if="!scope.row.checked"/>
                    </template>
                </el-table-column>
                <el-table-column prop="reMove" label="功能操作" width="160">
                    <el-button @click="remove(index)">删除</el-button>
                </el-table-column>
            </el-table>
            <h2>已完成</h2>
            <ol>
                <template v-for="(item,key) in  todos">
                    <li v-if='item.checked'>
                        <input type="checkbox" v-model='item.checked' @change="savetodos(item.checked)" />
                        {{item.taskText}}
                    </li>
                </template>
            </ol>
        </template>

    </div>
    <script>
        const App = {
            data() {
                return {
                    // 待办任务列表数据
                    todos: [],
                    // 当前输入的待办任务
                    taskText: "",
                    checked: '',
                    // 选中数组
                    titleList: [],
                    //选中的记录数量
                    selectedNum: 0,
                }
            },
            computed: {
                styleForm: {
                    get() {
                        return `width:1000px;margin:40px auto;text-align:center;cursor: pointer;`
                    }
                },
                headerStyle: {
                    get() {
                        return ``
                    }
                }
            },
            methods: {
                // 添加一条待办任务
                addTask() {
                    // 判断下输入框是否为空
                    if (this.taskText.length == 0) {
                        this.$message.warning('请输入任务...')
                        // alert("hh")
                        return
                    }
                    this.todos.push({ taskText: this.taskText, checked: false, reMove: '删除' })
                    this.taskText = ""
                    storage.set('todos', this.todos);
                },
                // 删除一条待办任务
                remove(index) {
                    this.todos.splice(index, 1)
                    storage.set('todos', this.todos);
                },
                keyclick(e) {
                    console.log(e);
                    if (e.keyCode == 13) {
                        this.todos.push({ taskText: this.taskText, checked: false, reMove: '删除' })
                        storage.set('todos', this.todos);
                    }
                },
                savetodos(checked) {
                    storage.set('todos', this.todos);
                    console.log(checked)
                },
                tableClass({ row, rowIndex }) {
                    if (row.checked) {
                        return 'display-row';
                    }
                    return '';
                },
                // 多选框选中数据
                handleSelectionChange(selection) {
                    //获取所有选中项的某属性的值
                    this.titleList = selection.map(item => item.checked)
                    //获取所有选中项数组的长度
                    this.selectedNum = selection.length
                    console.log(this.titleList,this.selectedNum)
                },
            },
            mounted() {
                /*生命周期函数，vue页面刷新就会触发的方法，获取缓存数据*/
                var todos = storage.get('todos');
                if (todos) {
                    this.todos = todos;
                }            }
        }
        Vue.createApp(App).use(ElementPlus).mount("#Application") 
    </script>
</body>

</html>
<!-- vue+elementplus实现待办事项的持久化存储 -->

storage.js

var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));

    },
    get(key){
        return JSON.parse(localStorage.getItem(key));

    },
    remove(key){
        localStorage.removeItem(key);
    }
}

效果预览：

存在问题：

1.el-table导入数据与v-for循环的数据方式不同，el-table中某一行属性判断无法直接隐藏和显示整行，因为el-table常规对列操作。需要借助:row-class-name="tableClass" 通过css样式进行隐藏和显示，v-for则可以。

<template v-for="(item,key) in  list">
    //这里可以直接通过判断隐藏还是显示li元素
   <li v-if='!item.checked'>
      <input type="checkbox" v-model='item.checked' @change="savelist()" />{{item.title}}
      <button @click="deldata(key)">删除</button>
   </li>
</template>

2.使用filter()可以过滤不符条件的数组内容，但在本例中缺乏合适的判断条件

3.所以优化方向是不使用el-table，直接使用table或者v-for