vue列表渲染出的ul表进行置顶和下移的操作

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为点击删除传来的值