需求:table排序,可操作排序上移下移功能。判断第一行上移禁用和最后一行下移禁用,排序根据后端返回的字段
< 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- columnprop= "name" label= "编号" width= "180" > < / el- table- column> < el- table- columnprop= "address" label= "排序" > < template slot- scope= "scope" > < el- buttontype= "text" disabled= { index === 0 } @click= { e => this . sortFunction ( e, row, "1" ) } > 上移< / el- button> < el- buttontype= "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- buttonclass = "end-upon btns" : disabled= "uponindex === 0" : class = "isEndBtn === true ? 'isActive' : ''" @click= "endUponClick()" > 上一条< / el- button> < el- buttonclass = "end-next btns" : disabled= "isDisabled" : class = "isNextBtn === true ? 'isActive' : ''" @click= "endNextClick()" > 下一条< / el- button> < / div>
endUponClick ( ) { let oldName = 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 ( ) { let oldName = 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) ; } } } ) ; } ,