使用elementui 的el-pagination分页组件current页数报错了

Z时代
2024-02-20
分类：IT

报错信息：

found in

---> <Pagination> at src/components/pagination.vue

   <ElCol>
     <ElRow>
       <ReportList> at src/views/report/list.vue
         <Index> at src/views/layout/index.vue
           <App> at src/App.vue             <Root>

[vue警告]：避免直接更改支柱，因为每当父组件重新呈现时，值都会被覆盖。相反，使用基于支柱值的数据或计算属性。

问题描述：
我把分页参数保存在vuex里的。
在页面需要分页的地方。如果我直接使用elementui 的分页组件。就不会报错。
目前我把这个分页组件单独写在一个子组件里面的。拆分成组件后。功能是可以正常使用的。但是我每次点击那个上一页。下一页。就会报这个错。

下面是我的代码：
子组件：

<template>
  <!-- 分页组件 -->
  <div class="common-pagination-wrap">
    <el-pagination
        background
        layout="total,sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :small="$store.state.isMobile ? true : false"
        :hide-on-single-page="false"
        :page-size="size"
        :page-sizes="[2,5,10, 20, 30, 40]"
        :total="total"
        :current-page.sync="current"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    total: {
      required: true,
      type: [Number, String],
      default: 1,
    }, // 数据总条数
    size: {
      required: true,
      type: [Number, String],
      default: 10,
    }, // 每页显示条数
    current: {
      required: true,
      type: [Number, String],
      default: 1,
    }, // 当前页
  },
  data() {
    return {}
  },
  components: {},
  methods: {
    /**
     * 每页显示个数选择器的选项设置
     * @param val
     */
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`)
      this.size = size
      // 通知父组件页数改变，并传参新的页数
      this.$emit('onSizeChange', size)
    },
    /**
     * 当前页面改变事件
     * @param current {Number} 当前页
     **/
    handleCurrentChange(current) {
      console.log(current)
      // 通知父组件页数改变，并传参新的页数
      this.$emit('onCurrentChange', current)
    },
  },
}</script>

父组件：

        <!-- 分页区域 -->
        <el-row class="pagination-part">
          <el-col align="center">
            <pagination
                :total="pageOption.total"
                :size="pageOption.size"
                :current="pageOption.current"
                @onCurrentChange="onCurrentChange">
              分页
            </pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/pagination'
import {saveAs} from "file-saver"
import htmlDocx from "html-docx-js/dist/html-docx"
export default {
  name: 'helperList',
  data() {
    return {
      pageOption: null, // 页面参数，从vuex store中获取
      tableData: [],
    }
  },
  components: {
    pagination,
  },
  computed: {},
  methods: {
    // 从vuex store中获取存储的页面参数
    setPageOption() {
      this.pageOption = this.$store.state.helperOption
    },
    /**
     * 分页改变
     * @param current {Number} 页数
     */
    onCurrentChange(current) {
      this.pageOption.current = current
      // 重新获取数据
      this.onSearch()
    },
    // 搜索
    onSearch() {
      // 搜索参数
      const axiosParam = this.pageOption
      console.log('搜索参数', axiosParam)
      // 进行搜索
      this.$API.getProblemAssistantList(axiosParam).then(res => {
        console.log(res)
        console.log(res.data.rows)
        this.tableData = res.data.rows
        this.pageOption.total = res.data.total
      }).catch(err => {
        console.log(err)
      })    },

vuex：

reportOption: { title: null, // 标题名称 startTime: null, // 操作开始日期 endTime: null, // 操作结束日期 year: null, // 年份 month: null, // 月份 current: 1, // 分页当前页 size: 5, // 分页每页显示条数 total: 1000, // 数据总条数

},

我自己没有专门去设置这个页数。只有在点击上一页下一页的时候。会触发elementui 自己的分页组件。那个页数会自己改变。所以是这样原因导致报错的吗？我该怎么修改呢？