使用Vue的mixin混入抽取elementui的分页条el-pagination的数据和方法

1.创建混入的文件

2.抽取混入的代码

// 将分页的公用代码抽取出来 规定查询数据的方法名为fetchData,重新回显的方法名为reloadData,页面中统一调用
export default {
  data () {
    return {
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      layout: 'total, sizes, prev, pager, next, jumper', // 控件
      pageSize: 10, // 页容量
      pageSizes: [10, 20, 50, 100], // 页容量规格
      list: [] // 表格数据
    }
  },
  methods: {
    // 当前页容量发生改变
    sizeChange (pageSize) {
      this.currentPage = 1
      this.pageSize = pageSize
      this.fetchData()
    },
    // 当前页码发生改变
    currentPageChange (currentPage) {
      this.currentPage = currentPage
      this.fetchData()
    },
    // 刷新分页数据
    reloadData () {
      // 重置页码=1
      this.currentPage = 1
      // 更新数据
      this.fetchData()
    },
    // 删除
    del (id) {
      this.$confirm('您确定删除吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.deleteMethod({ id })
          // 判断是否为最后一页的最后一条数据
          this.list.forEach((item, index) => {
            if (item.id === id) {
              if (
                (this.currentPage - 1) * this.pageSize + index + 1 ===
                  this.total &&
                index === 0 &&
                this.currentPage >1
              ) {
                // 如果是就回到上一页
                this.currentPage--
              }
            }
          })
          // 回显最新列表数据
          this.fetchData()
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 2000
          })
        })
        .catch(() => {})
    }
  }
}

3.在需要分页的页面使用

// 先导入
import pagination from '@/mixins/pagination';
// 注册到组件中
export default {
  name: 'TaskPlan',
  mixins: [pagination] // 要混入的对象写在这里,对应的数据就会合并到Vue的实例上去了
}

4.页面需要准备的

// 分页条组件
<el-card class="pagination">
    <el-pagination
    :total="total"
    background
    :layout="layout"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    @current-change="currentPageChange"
    @size-change="sizeChange"
    ></el-pagination>
</el-card>
// 导入删除的api
import { deleteXxx } from '@/api/xxx'
// 删除的api,表格数据的名字为list,改名方便混入中统一调用
data(){
    deleteMethod: deleteXxx
},
// 方法:加载数据的方法,方便混入中统一调用
methods:{
    fetchData(){
        
    }
}

混入的加载和合并方式

data:组件自己的data先加载,发生冲突的属性以组件自己的data有限使用

钩子函数:created、mounted等同名钩子函数会合并成一个数组，都将被调用。混入对象钩子函数优先执行

对象选项:components,methods,directives等对象，会被合并为同一对象。如果出现了相同，则组件自己中的优先执行

混入中传参是行不通的,只能变相的在页面中提前修改好变动的值,这样就能实现传参的动态效果