Vue+ElementUI笔记(1)

一、表格
1.上移、下移和移除功能

需求:有时我们会面对类似这样的表格

Vue+ElementUI笔记(1)_第1张图片

图中的上移,下移功能需求明显要求我们改变两行数据的顺序。在实际开发中这种功能一般由后台来做,因为列表数据一般从后台获取刷新。即是我们点击”上移“,向后台请求接口,后台将数据库表格中的项交换位置,再把新的数据返回,前端拿到数据,重新刷新表格数据。

在此这篇博文仅设计到前端的数据处理及展示效果。因为我在开发过程中遇到了类似的需求,上移、下移功能不局限于表格,它也能是一个循环展示模块中的内容。

核心的JavaScript方法是:splice 对数组处理方法,删除或插入内容

  • 第一个参数是目标位置
  • 第二个参数是从目标位置开始删除的元素个数,0代表不删除元素
  • 第三个参数是选择插入的内容,插入位置自然是第一个参数
  • 前两个参数必选,第三个参数可选






你可能感兴趣的:(vue.js,前端,javascript)