1.首先我们需要利用列表渲染来创建出我们的无序表ul
<div>
<ul>
<li v-for="(item, index) in arr" :key="item">
<span title="置顶"@click="getTopMove(index)"
>置顶</span>
<span title="下移"@click="getDownMove(index)"
>下移</span>
</div>
</li>
</ul>
</div>
2.我们使用vue上的数组来渲染上述列表
<script>
export default defineComponent({
name: "XXX",
data() {
return {
arr:[自己往里面放入一些数据]
};
},
</script>
3.下面才是进行操作的代码,首先在method配置项中添加方法并向1中添加点击事件
methods:{
//置顶表格的某一项
getTopMove(index) {
this.arr.unshift(...this.arr.splice(index, 1));
},
//列表下移
getDownMove(index) {
this.arr.splice(
index,
1,
...this.arr.splice(index + 1, 1, this.arr[index])
);
},
}
这样就能实现置顶和下移操作了
剖析:
在剖析前我们需要先了解splice函数的三个功能
第一种:删除功能
当splice方法有两个参数形如splice(index,num)时,可以删除数组中的元素,其中index为删除的开始位置,num是需要删除的个数
第二种:插入功能
当splice方法有三个参数形容splice(index,0,insert)时,可以往数组中插入元素,即在index后插入名为insert的元素,此处insert可以是一个元素也可以是一个数组
第三种:替换功能
当splice方法有三个参数形容splice(index,num,insert)时,可以替换数组中的元素,意思是从index开始删除num个元素之后再把insert插入到数组尾部,此处insert可以是一个元素也可以是一个数组。
现在我们来进行对上述代码的刨析
首先是置顶,置顶就是把某一项设置成列表的第一项,也就是arr[0],而代码中的...this.arr.splice(index,1)就是获取到这个要置顶的一项,unshift()方法是利用头插法把获取到的数据,即把获取的元素放入arr这个数组的第一个。
其次是我们的下移某一项,splice(index + 1, 1, this.arr[index])是利用这个元素替换他后一个元素,然后返回整个数组,this.arr.splice(index,1,...this.arr.splice(index + 1, 1, this.arr[index]));这一步是用获取的元素来替换原本的元素以实现下移一项的目的
=======================================更新
关于数组操作的补充之删除
deleteFormInf(val) {
this.templateInftableData = this.templateInftableData.filter((e) => {
var flag = false;
// 如果不一致,则保留该行
for (const key in val) {
if (e[key] != val[key]) {
flag = true;
break;
}
}
return flag;
});
},
适用于表格中删除数组的某一项,val为点击删除传来的值