Vue+ElementUI table表格+pagination分页进行动态绑定功能

效果图：

分页部分代码

<pagination
   v-show="total>0"
   :total="total"
   :page.sync="queryParams.pageNum"
   :limit.sync="queryParams.pageSize"
   @pagination="getList"
/>

<script>
export default {
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      }
  },
   created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      let queryParams = this.addDateRange(this.queryParams, this.entrustDateRange, "EntrustDate");
      queryParams = this.addDateRange(this.queryParams, this.consultDateRange, "ConsultDate");
      listTestSample(queryParams).then(response => {
        response.rows.forEach(item => {
          item.dropSampleList = []
          this.$set(item, 'droploading', false)
        })
        this.testSampleList = response.rows;
        let row = response.rows.filter(item => item.id === this.expandRowKeys[0])[0]
        if (row){
          // console.log(row,"let row")
          this.getTestSampleTable(row)
          this.total = response.total;
          this.loading = false;
        }else{
          this.total = response.total;
          this.loading = false;
          // console.log(response)
        }
      });
    },
}
</script>

属性说明

v-show：是否显示此部分内容

pageNum：当前页码

pageSize：每页显示数据条数

total：数据总数量

pagination：列表绑定