vue el-table实现行上移下移

最新推荐文章于 2024-12-31 11:18:32 发布

原创最新推荐文章于 2024-12-31 11:18:32 发布 · 1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

该代码示例展示了如何在Vue.js中使用el-table组件，通过moveUp和moveDown方法实现表格数据的上移和下移功能。当用户点击按钮时，数据在数组中的位置会相应调整。如果数据位于数组首尾，则给出提示。

<el-table :data="data">
   <el-table-column>
      <template slot-scope="scope">
          <button @click="moveUp(scope.$index)"><i class="el-icon-top"></i></button>
          <button @click="moveDown(scope.$index)"><i class="el-icon-bottom"></i></button>      
      </template>
   </el-table-column>

</el-table>

data(){}
  return{
    data:[]  //元数据
  }

methods:{
 // 上移
    moveUp(index) {
      if (index > 0) {
        const upDate = this.data[index - 1];
        this.data.splice(index - 1, 1);
        this.data.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
}
  // 下移
    moveDown(index) {
      if (index + 1 === this.data.length) {
        alert("已经是最后一条，不可下移");
      } else {
        const downDate = this.data[index + 1];
        this.data.splice(index + 1, 1);
        this.data.splice(index, 0, downDate);
      }
    },