分页实现但是表格不刷新？

站长

2024年06月26日 08:51 · 阅读数 20

分页：

<el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, i) in cols"
          :key="i"
          align="center"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="getTotal">
    </el-pagination>

data:

 data () {
    return {
      tableData: [],
      cols: [],
      currentPage: 1,
      pagesize: 1
    }
  },

分页方法：

 handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getData()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getData()
    }

1个回答

test

2024-06-26

应该是tableData赋值了ui没有刷新问题，可以使用this.$set()赋值试试

    this.$set(this,'tableData',response)
    //这里是伪代码，具体索引+1或-1需要自己操作
    const num = currentpage-1 * pagesize
    if(num + pagesize >= response.length){
        this.$set(this,'tableData',response.slice(num,response.length))
    }else{
        this.$set(this,'tableData',response.slice(num,num + pagesize))
    }

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容