Element——table排序，上移下移功能。及按钮上一条下一条功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element——table排序，上移下移功能。及按钮上一条下一条功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：table排序，可操作排序上移下移功能。判断第一行上移禁用和最后一行下移禁用，排序根据后端返回的字段

Element——table排序，上移下移功能。及按钮上一条下一条功能,javascript,前端,elementui 文章来源地址https://www.toymoban.com/news/detail-682916.html

 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="index" label="序号" align="center" min-width="50">
        <template slot-scope="scope">
          <span>{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="排序">
         <template slot-scope="scope">
			<el-button
                  type="text"
                  disabled={index === 0}
                  @click={e => this.sortFunction(e, row, "1")}
                >
                  上移
                </el-button>
                <el-button
                  type="text"
                  disabled={index === this.tableData.length - 1}
                  @click={e => this.sortFunction(e, row, "2")}
                >
                  下移
                </el-button>
            </el-table-column>
      </el-table-column>
      <el-table-column prop="address" label="操作" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button
            >编辑
          </el-button>

          <el-button  @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

sortFunction(e, row, type) {
      changeSort({//排序接口
        sortType: type,
        templateConfigId: row.templateConfigId
      }).then(res => {
        if (res.code === 200) {
          this.getList();//获取表格接口
        }
      });
    },

按钮上一条下一条功能

            <div class="right-bottom">
              <el-button
                class="end-upon btns"
                :disabled="uponindex === 0"
                :class="isEndBtn === true ? 'isActive' : ''"
                @click="endUponClick()"
                >上一条</el-button
              >
              <el-button
                class="end-next btns"
                :disabled="isDisabled"
                :class="isNextBtn === true ? 'isActive' : ''"
                @click="endNextClick()"
                >下一条</el-button
              >
            </div>

//上一条按钮
    endUponClick() {
      //存老的值 oldName
      let oldName = this.activeName;//this.activeName 当前选中的那一条数据
      let addNum = this.activeName - 1;
      this.tabsList.forEach((item, index) => {
        if (addNum === 0) {
          this.isEndBtn = true;
          this.isBtnDisabled = true;
          this.isNextBtn = false;
          this.$message({
            message: '此项为第一条数据',
            type: 'warning'
          });
        }
        if (addNum === item.sort) {
          this.activeName = addNum;
          if (item.testStatus === '2') {
            this.onSetShow = true;
          } else {
            this.onSetShow = false;
          }
          //当前选中的那一条
          this.tabsList.forEach(v => {
            if (oldName === v.sort) {
              this.contentCode = v.contentCode;
              this.debugContent = v.debugContent;
              this.testStatus = v.testStatus;
              this.dataRecordResultList = v.dataRecordResult;
            }
          });
          this.isEndBtn = true;
          this.isNextBtn = false;
          this.activeName = addNum;
          this.updateInfo(this.dataRecordResultList);
        }
      });
    },

//下一条按钮
    endNextClick() {
      //存老的值 oldName
      let oldName = this.activeName;//this.activeName 当前选中的那一条数据
      let addNum = this.activeName + 1;
      let lengthNum = this.tabsList.length + 1;
      this.tabsList.forEach((item, index) => {
        if (addNum === lengthNum) {
          this.isNextBtn = true;
          this.isEndBtn = false;
          this.isBtnDisabled = true;
          this.$message({
            message: '此项为最后一条数据',
            type: 'warning'
          });
        } else {
          if (addNum === item.sort) {
            this.activeName = addNum;
            if (item.testStatus === '2') {
              this.onSetShow = true;
            } else {
              this.onSetShow = false;
            }
            //当前选中的那一条
            this.tabsList.forEach(v => {
              if (oldName === v.sort) {
                this.contentCode = v.contentCode;
                this.debugContent = v.debugContent;
                this.testStatus = v.testStatus;
                this.dataRecordResultList = v.dataRecordResult;
              }
            });
            this.isNextBtn = true;
            this.isEndBtn = false;
            this.activeName = addNum;
            this.updateInfo(this.dataRecordResultList);
          }
        }
      });
    },