一、表格

1.上移、下移和移除功能

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

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

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

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

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

<template><el-table :data="tableData" border style="width: 58%"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="150"><template slot-scope="scope"><el-buttontype="text"size="small"@click="moveUp(scope.row, scope.$index)":disabled="scope.$index === 0">上移</el-button><!-- 这里分别展示了判断是否上移下移的两种方案 --><el-buttontype="text"size="small"@click="moveDown(scope.row, scope.$index)":disabled="getFormLength(scope.$index)">下移</el-button><el-button type="text" size="small" @click="deleteItem(scope.$index)">移除</el-button></template></el-table-column></el-table>
</template><script>
export default {name: "splice",data() {return {disabled: true,tableData: [{date: "2024-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即不删除如何元素，在此位置插入itemthis.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;},},
};
</script><style lang="scss" scoped>
</style>