VUE入门练习Todo
目录
一、结果展示
分页列表
新增输入框
任务编辑
状态切换
二、实现
1、分页列表
字段:序号id,任务标题title,任务状态标记compeleted(true完成,false未完成)
分页设置:
<el-table :data="todoQueryForm.todolist.slice((todoQueryForm.currpage - 1) * todoQueryForm.pagesize, todoQueryForm.currpage * todoQueryForm.pagesize)" >
<el-pagination layout="prev, pager, next, sizes, total, jumper"
:page-size="todoQueryForm.pagesize"
:total="todoQueryForm.todolist.length"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
handleCurrentChange(cpage) {
this.todoQueryForm.currpage = cpage;
},
handleSizeChange(psize) {
this.todoQueryForm.pagesize = psize;
},
//模拟list数据返回至前端
Mock.mock('/todoList', 'get', (req, res) => {
let list = [];
for (let i=0; i<15; i++){
let listObject = {
title: Mock.mock('@csentence')
}
list.push(listObject);
}
return {
data: list
}
})
ElementUI的Pagination 分页主要属性如下,参考elementUI官方说明。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
page-size | 每页显示条目个数,支持 .sync 修饰符 | number | — | 10 |
total | 总条目数 | number | — | — |
page-count | 总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性 | Number | — | — |
pager-count | 页码按钮的数量,当总页数超过该值时会折叠 | number | 大于等于 5 且小于等于 21 的奇数 | 7 |
current-page | 当前页数,支持 .sync 修饰符 | number | — | 1 |
layout | 组件布局,子组件名用逗号分隔 | String | sizes , prev , pager , next , jumper , -> , total , slot | 'prev, pager, next, jumper, ->, total' |
page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
prev-text | 替代图标显示的上一页文字 | string | — | — |
next-text | 替代图标显示的下一页文字 | string | — | — |
disabled | 是否禁用 | boolean | — | false |
hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
事件:
事件名称 | 说明 | 回调参数 |
---|---|---|
size-change | pageSize 改变时会触发 | 每页条数 |
current-change | currentPage 改变时会触发 | 当前页 |
prev-click | 用户点击上一页按钮改变当前页后触发 | 当前页 |
next-click | 用户点击下一页按钮改变当前页后触发 | 当前页 |
2、新增任务
- 通过input文本框,监听enter事件;
<el-form :model='todoQueryForm' ref="todoQueryForm" label-width="130px" label-height="50px" class="input">
<el-form-item style="line-height: 44px;" label="添加待做事件:">
<el-input v-model="todoQueryForm.title" placeholder="请输入待做事项" v-on:keyup.enter.native="addTodo"></el-input>
</el-form-item>
</el-form>
addTodo:function(){
if(this.todoQueryForm.title){
this.todoQueryForm.todolist.push({
title:this.todoQueryForm.title,
})
this.axios({
method:'post',
url: '/todoAdd',
data:this.todoQueryForm.todolist
}).then((res)=>{
console.log(res);
}).catch(err => {
console.log(err);
})
} else{
alert("所添加事件不能为空!")
}
},
//模拟请求地址
Mock.mock( '/todoAdd', function (options) {
console.log(options);
});
3、删除任务
- 移除当前项
<el-table-column label="操作" min-width="20%" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
handleDelete: function(index){
this.todoQueryForm.todolist.splice(index, 1);
},
4、编辑任务
- 点击编辑按钮,弹出编辑框,显示原文本,并进入编辑状态
- 编辑完成,点击确定,退出编辑框
<el-dialog title="编辑待办事项" :visible.sync="todoQueryForm.dialogFormVisible" >
<el-form :model="modifyForm">
<el-form-item label="编辑待做事件:" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.title" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="todoQueryForm.dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="editTodo(modifyForm.title)">确 定</el-button>
</div>
</el-dialog>
editTodo: function(title){
this.axios.post('/edit',[this.modifyForm.id,title])
.then( res =>{
this.todoQueryForm.todolist[this.modifyForm.id].title=title;
this.todoQueryForm.dialogFormVisible = false
})
},
5、路由状态切换
- 点击不同状态(all/active/completed),过滤出对应任务项
<el-table :cell-class-name="delLine">
<el-table-column label="标记" min-width="10%" align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" onchange="delLine(scope.$index,scope.row)"></el-checkbox>
</template>
</el-table-column>
</el-table>
delLine: function ({row,index,}) {
if (row.checked) return 'del_line'
},
//删除线
.del_line::after {
content: no-open-quote;
position: absolute;
top: 51%;
left: 0;
width: 100%;
border-bottom: 1.5px solid #000;
}
6、数据持久化
- 实现数据的本地存储
建立文件store.js,设置存取函数save和fetch。引入所需文件即可。
const STORAGE_KEY = 'local_data'
export default{
fetch () {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save (items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}