vue 数组元素通过 “前移”和‘后移’ 按钮交换位置

最新推荐文章于 2023-11-22 17:35:41 发布

咸鱼妹妹

最新推荐文章于 2023-11-22 17:35:41 发布

阅读量2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45884202/article/details/111246851

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue 数组元素通过 “前移”和‘后移’ 交换位置（l两种方法）
方法一：解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>方法一：解构赋值</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

  <style>
    #app {
      display: flex;
    }
    .m-left {
      flex: 1;
      padding: 20px;
      margin: 20px;
      border: 1px solid red;
    }

    .m-right {
      flex: 1;
      padding: 20px;
      margin: 20px;
      border: 1px solid #306fff;
    }

    .btn {
      border: 1px solid #ddd;
      padding: 2px 8px;
      cursor: pointer;
    }

    table {
      width: 100%;
      table-layout: fixed;
    }

    table tr {
      height: 40px;
      line-height: 40px;
    }
  </style>
</head>
<body>
  <div id="app">
    
    <section class="m-left">
      <table>
        <thead>
          <th v-for="(col, i) in cols" :key="i">{{col.name}}</th>
        </thead>
        <tbody></tbody>
      </table>
    </section>

    <section class="m-right">
      <table>
        <tbody>
          <tr v-for="(item, i) in list" :key="i">
            <td><span>{{item.name}}</span></td>
            <td><span class="btn" @click="up(i)">上移</span></td>
            <td><span class="btn" @click="down(i)">下移</span></td>
            <td><span class="btn" @click="del(i)">删除</span></td>
          </tr>
        </tbody>
      </table>
      <span class="btn" @click="add">添加一项</span>
    </section>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: '表头1'},
          { id: 2, name: '表头2'},
          { id: 3, name: '表头3'},
          { id: 4, name: '表头4'},
        ]
      },
      computed: {
        cols () {
          // 这里可以根据具体需要构造cols，比如只需要某些列，在这里过滤即可
          return this.list
        }
      },
      methods: {
        up (i) {
          if(i <= 0) return

          [this.list[i-1],this.list[i]] = [this.list[i],this.list[i-1]]

          this.$forceUpdate()
        },
        down (i) {
          if(i >= this.list.length - 1) return

          [this.list[i+1],this.list[i]] = [this.list[i],this.list[i+1]]

          this.$forceUpdate()
        },
        del (i) {
          this.list.splice(i,1)
        },
        add () {
          this.list.push({ id: this.list.length+1, name: `表头${this.list.length+1}`})
        }
      }
    })
  </script>
</body>
</html>

方法二：splice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法二：splice</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        #app {
          display: flex;
          justify-content: space-around;
        }
    
        .ul1,
        .ul2 {
          font-size: 24px;
          font-weight: 700;
          color: #333;
          width: 800px;
          border: 1px solid #ccc;
        }
    
        .li {
          height: 50px;
          line-height: 50px;
        }
    
        .li:nth-child(2n) {
          background-color: rgb(243, 138, 138);
        }
    
        .btn1 {
          background-color:rgb(171, 171, 235);
        }
    
        .btn2 {
          background-color: rgb(193, 233, 183);
        }
    
        .btn1,
        .btn2 {
          float: right;
          width: 120px;
        }
    
        .ul2 {
          border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul class="ul1">
          <li class="li" v-for="item in ArrOne" :key="item.id" @click="handleOne(item)">
            {{ item.value }}
          </li>
        </ul>
        <ul class="ul2">
          <li class="li" v-for="(item, index) in ArrTwo" :key="item.id">
            {{ item.value }}
            <span class="btn1" @click="up(index)" >Up</span>
            <span class="btn2" @click="down(index)" >Down</span>
          </li>
        </ul>
      </div>
    <script>
      let app = new Vue({
          el:'#app',
          data(){
             return{
                ArrOne: [
                    { id:0, value:'虹猫'},
                    { id:2 ,value:'蓝兔'},
                    { id:3, value:'赖皮蛇'},
                    { id:4, value:'肥鲶鱼'},
                    { id:5, value:'小鲤鱼'}
                ],
                ArrTwo: [],
             }
          },
          methods:{
            handleOne(item){
               this.ArrTwo.push(item);
            },
            up(index){
                console.log(index)
                 if(index != 0){
                    this.ArrTwo[index] = this.ArrTwo.splice(index - 1,1,this.ArrTwo[index])[0];
                 }else{
                     alert('已经是第一个数据了，不可以上移了')
                 }
            },
            down(index){
                console.log(index)
                if(index != this.ArrTwo.length-1){
                    this.ArrTwo[index] = this.ArrTwo.splice(index+1,1,this.ArrTwo[index])[0];
                }else{
                    alert('已经是最后一个数据了，不可以下移了')
                }
            }
          }
      })
    </script>
</body>
</html>

咸鱼妹妹

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue 数组元素通过 “前移”和‘后移’ 按钮交换位置

vue 数组元素通过 “前移”和‘后移’ 交换位置（l两种方法）方法一：解构赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>方法一：解构赋值</title> <sc
复制链接

扫一扫