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

Question

报错信息：

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 自己的分页组件。那个页数会自己改变。所以是这样原因导致报错的吗？我该怎么修改呢？

Answer 1

current-page 是一个 v-model， 翻页的时候组件会直接修改current的值，而你的current是props，vue又不允许修改，所以就存在这个警告了。

你把current定义到当前组件即可， 如果父组件需要这个值，你可以通过emit传递过去

Answer 2

解决办法：
根据大佬的建议。我把子组件里的参数写到data里去就可以了：