美文网首页
element-ui 表格中某一项上/下移动

element-ui 表格中某一项上/下移动

作者: web30 | 来源:发表于2022-04-16 17:35 被阅读0次
表格中某项上/下移动
<el-table-column  label="操作"  width="230">
  <template slot-scope="scope">
    // 这里的v-if判断是表示表格第一行不显示上移,最后一行不显示下移
    <el-button type="text" @click="onMovePosition(scope.row,'up')" v-if="pagination.pageSize*(pagination.pageNum-1)+scope.$index>0">上移</el-button>
    <el-button type="text" @click="onMovePosition(scope.row,'down')" v-if="pagination.pageSize*(pagination.pageNum-1)+scope.$index<pagination.total-1">下移</el-button>
  </template>
</el-table-column>
data(){
  return{
    pagination: { // 分页
        pageSize: 20,
        pageNum: 1,
        total: 0
      }
  }
},
methods:{
  onMovePosition(row, type) {
      const params = {
        id: row.id,
        direction: type == 'up' ? 1 : 2, // 1上移 2下移
        tempType: 3
      }
      this.$requestInternet.post('/api/xx', params).then(res => {
        this.$message.success('移动成功')
      })
    }
}

相关文章

网友评论

      本文标题:element-ui 表格中某一项上/下移动

      本文链接:https://www.haomeiwen.com/subject/mrehertx.html