需求: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- 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 ( ) {
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) ;
}
}
} ) ;
} ,