需求:

表格支持上移,下移,置顶,当第一行的时候,置顶/上移按钮不可点击
最后一行下移按钮不可点击,点击提交再一并请求数据。上图效果
在这里插入图片描述

  • 实现步骤1:
 <el-table-column prop="name" min-width="200" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getTopMove(scope.row,scope.$index)" :disabled="scope.$index==0">
              置顶
            </el-button>
            <el-button type="text" size="small" @click="getUpMove(scope.row,scope.$index)" :disabled="scope.$index==0">
              上移
            </el-button>
            <el-button type="text" size="small" @click="getDownMove(scope.row,scope.$index)"
                       :disabled="dataList.length-1==scope.$index">下移
            </el-button>
          </template>
        </el-table-column>
  • 实现步骤2:
methods: {
//置顶
  getTopMove(row, index) {
      this.dataList.splice(index, 1)
      this.dataList.unshift(row)
    },
    //上移
    getUpMove(row, index) {
      let arr = this.dataList;
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },
    //下移
    getDownMove(row, index) {
      let arr = this.dataList;
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },
 }

到这就结束了,保存的时候直接拿到dataList去请求接口完事。

Logo

前往低代码交流专区

更多推荐