VUE+ElementUI入门练习

VUE入门练习Todo

---

目录

VUE入门练习Todo

 一、结果展示

二、实现

1、分页列表

2、新增任务

3、删除任务

4、编辑任务

5、路由状态切换

6、数据持久化

 

---

 

 一、结果展示

分页列表

 新增输入框

任务编辑

 状态切换

二、实现

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、新增任务

1. 通过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、删除任务

1. 移除当前项

 <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、编辑任务

1. 点击编辑按钮，弹出编辑框，显示原文本，并进入编辑状态
2. 编辑完成，点击确定，退出编辑框

    <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、路由状态切换

1. 点击不同状态（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、数据持久化

1. 实现数据的本地存储

建立文件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))
  }
}