vue+elementui 实现表格上移、下移和移除功能 |
您所在的位置：网站首页 › 表格两行交换 › vue+elementui 实现表格上移、下移和移除功能 |
vue+elementui 实现表格上移、下移和移除功能
|
需求：有时我们会面对类似这样的表格
图中的上移，下移功能需求明显要求我们改变两行数据的顺序。在实际开发中这种功能一般由后台来做，因为列表数据一般从后台获取刷新。即是我们点击”上移“，向后台请求接口，后台将数据库表格中的项交换位置，再把新的数据返回，前端拿到数据，重新刷新表格数据。 在此这篇博文仅设计到前端的数据处理及展示效果。因为我在开发过程中遇到了类似的需求，上移、下移功能不局限于表格，它也能是一个循环展示模块中的内容。 核心的JavaScript方法是：splice 对数组处理方法，删除或插入内容 第一个参数是目标位置第二个参数是从目标位置开始删除的元素个数，0代表不删除元素第三个参数是选择插入的内容，插入位置自然是第一个参数前两个参数必选，第三个参数可选代码例子： 上移 下移 移除 export default { name: "splice", data() { return { disabled: true, tableData: [ { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-04", name: "张小龙", province: "深圳", city: "福田区", address: "车公庙", zip: 200333, }, { date: "2016-05-01", name: "李牧", province: "江南", city: "鑫林", address: "南山区", zip: 200333, }, { date: "2016-05-03", name: "哪吒", province: "普拉达", city: "纽约", address: "国家公园", zip: 200333, }, ], }; }, methods: { // 上移 moveUp(item, index) { this.tableData.splice(index - 1, 0, item); // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item this.tableData.splice(index + 1, 1); // 此时数组中有重复元素，把原来被挤下去的元素删除 }, // 下移 moveDown(item, index) { this.tableData.splice(index + 2, 0, item); this.tableData.splice(index, 1); }, // 添加 // addItem() { // let item = { // date: "", // name: "", // province: "", // city: "", // address: "", // zip: "", // }; // this.tableData.push(item); // }, // 删除 deleteItem(index) { console.log("delete"); this.tableData.splice(index, 1); }, // 控制下移按钮的显示于隐藏 getFormLength(index) { if (index === this.tableData.length - 1) return true; else return false; }, }, };例子的基础是elementui中表格的例子，添加了自定义的上移、下移和移除方法，做得完善一些，自然要处理隐藏掉第一行的上移按钮和最后一行的下移按钮，并提供相关的判别方法 |
【本文地址】