vue-easy-print批量分页打印

import vueEasyPrint from “vue-easy-print”;
1打印页作为子组件,要打印的数据,由父组件请求获得, 再传给子组件 ( 注意 vm 和 css)
2 子组件watch, 当子组件准备完毕, 调用父组件的开启打印功能
3 分页的处理,在分页子组件上设置

  import vueEasyPrint from "vue-easy-print";
  import printdata from "./printdata";
  import printlist from "./printlist";

  components: {
      vueEasyPrint,
      printdata,
      printlist
    },
    data:{
      //打印数据
        dialogData: [],
        dialogList: [],
	}
	method:{
	  selectData(e) {
        this.selectedData = e
      },
	  print() {
        if (this.selectedData.length == 0) {
          this.$fns.error('请先选择一条记录！')
          return
        }
        const ids = this.selectedData.map((item) => item.id)
        let vm = this
        employee.batchDetail({ ids: ids }).then((res) => {
          console.log(res)
          if (res.flag == 0) {
            this.$fns.success(res.msg, false)
            var ao = res.object
            vm.dialogData = ao
          } else {
            this.$fns.error(res.msg, false)
          }
        })
      },
      print2() {
        if (this.selectedData.length == 0) {
          this.$fns.error('请先选择一条记录！')
          return
        }
        const ids = this.selectedData.map((item) => item.id)
        let vm = this
        employee.batchDetail({ ids: ids }).then((res) => {
          console.log(res)
          if (res.flag == 0) {
            this.$fns.success(res.msg, false)
            var ao = res.object
            vm.dialogList = ao
          } else {
            this.$fns.error(res.msg, false)
          }
        })
      },
      clickPrintdata() {
        let vm = this
        vm.$nextTick(function () {
          vm.$refs.easyPrint.print();
        })
      },
      clickPrintlist() {
        let vm = this
        vm.$nextTick(function () {
          vm.$refs.listPrint.print();
        })
      },
	}

一号打印页面 :print – dialogData

二号打印页面 :print – dialogList