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

文章來源地址http://www.zghlxwxcb.cn/news/detail-682916.html

 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="index" label="序號(hào)" 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="編號(hào)"
        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 當(dāng)前選中的那一條數(shù)據(jù)
      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: '此項(xiàng)為第一條數(shù)據(jù)',
            type: 'warning'
          });
        }
        if (addNum === item.sort) {
          this.activeName = addNum;
          if (item.testStatus === '2') {
            this.onSetShow = true;
          } else {
            this.onSetShow = false;
          }
          //當(dāng)前選中的那一條
          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 當(dāng)前選中的那一條數(shù)據(jù)
      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: '此項(xiàng)為最后一條數(shù)據(jù)',
            type: 'warning'
          });
        } else {
          if (addNum === item.sort) {
            this.activeName = addNum;
            if (item.testStatus === '2') {
              this.onSetShow = true;
            } else {
              this.onSetShow = false;
            }
            //當(dāng)前選中的那一條
            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);
          }
        }
      });
    },

到了這里，關(guān)于Element——table排序，上移下移功能。及按鈕上一條下一條功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！