vue换行及禁用变色

最新推荐文章于 2026-06-08 16:10:03 发布

原创最新推荐文章于 2026-06-08 16:10:03 发布 · 965 阅读

0 ·

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

标签

#vue

收录于

技术专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种在前端应用中实现表格行上下移动的方法，通过Vue.js的响应式系统，确保了数据的一致性和操作的流畅性。同时，通过CSS样式控制按钮的状态，实现了按钮在特定条件下禁用的功能。

1 换行（要控制第一行不能up，最后一行不能down）

changeRowDown(i){
          console.log(i);
          if(i != this.gridData.length-1){
            var tempOption = this.gridData[i+1];
            this.$set(this.gridData, i+ 1, this.gridData[i]);
            this.$set(this.gridData, i,tempOption)
          }
        },
        changeRowUp(i){
          if(i!=0){
            var tempOption = this.gridData[i-1];
            this.$set(this.gridData, i-1, this.gridData[i]);
            this.$set(this.gridData, i,tempOption)
          }
        },

2 禁用灰色

(控制部分情况按钮禁用，disble属性)

<el-button size="mini" class="bu-left" :class="{disable:scope.$index==0}" @click="changeRowUp(scope.$index)" type="text" icon="el-icon-arrow-up" circle></el-button>
        <el-button size="mini" class="bu-left" :class="{disable:scope.$index==gridData.length-1}" @click="changeRowDown(scope.$index)" type="text" icon="el-icon-arrow-down" circle></el-button>

css

.bu-left{
    float: left;
    background-color:#409EFF ;
    border-color:#409EFF;
    color:#fff;
  }
.bu-left.disable{
    pointer-events: none;
    background:#CFCFCF;
    color:#fff;
    border-color:#CFCFCF;
  }