module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 1920, //  視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，移動(dòng)端一般是750，如果是pc端那就是類似1920這樣的尺寸
      // viewportHeight: 1344, // 視窗的高度，移動(dòng)端一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無(wú)法整除）
      viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw
      selectorBlackList: ['.nocalssvw'], // 指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無(wú)限添加,建議定義一至兩個(gè)通用的類名
      exclude: [/printPersone/],
      // propList:["*", "!font-size"],//能轉(zhuǎn)化為vw的屬性列表
      minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值
      mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
    }
  }
};

父組件    
<template>
    <div>
        <el-dialog title="表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <el-button type="primary" plain style="margin-bottom:5px;" @click="handlePrint">打印</el-button>
            <el-row>
                <el-col :span="12">
                    <div>
                        <table border="1" class="tableOne" v-for="(item, index) in dataList" :key="index">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <td>張三</td>
                                    <th>性別</th>
                                    <td>男</td>
                                    <th>出生年月</th>
                                    <td>1985.5.10</td>
                                    <td rowspan="4" style="width: 130px;"></td>
                                </tr>
                                <tr>
                                    <th>民族</th>
                                    <td>漢</td>
                                    <th>籍貫</th>
                                    <td>漢</td>
                                    <th>出生地</th>
                                    <td>山東</td>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </el-col>
            </el-row>
            <!-- 引用那個(gè)打印的模板 -->
            <print-person ref="myPrintPerson" :list="dataList" />

        </el-dialog>
    </div>
</template>
  
<script>
import PrintPerson from './components/printPersone.vue'
export default {
    components: {
        PrintPerson,
    },
    data() {
        return {
            dialogVisible: false,
            dataList: [],
        };
    },
    created() {

    },
    methods: {
        init(dataList) {
            this.dialogVisible = true;
            this.dataList = dataList;
            this.getList();
        },
        handleClose(done) {
            done();
        },

        // 打印按鈕的事件
        handlePrint() {
            let refPrint = this.$refs['myPrintPerson']
            refPrint && refPrint.print()
        },
    }
};
</script>

打印的模板組件
<template>
    <div>
      <button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
      <div id="myprintDom" class="nocalssvw">
        <div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
          <table border="1" class="primt-table print-tableOne">
            <thead>
              <tr>
                <td style="width: 68px;" class="pt">姓名</td>
                <td style="width: 58px;">張三</td>
                <td style="width: 68px;" class="pt">性別</td>
                <td style="width: 68px;" class="ptw84">男</td>
                <td style="width: 68px;" class="pt">出生年月</td>
                <td style="width: 68px;">1987.5.10</td>
                <td rowspan="4" colspan="2" style="width: 120px;"></td>
              </tr>
              <tr>
                <td class="pt">民族</td>
                <td>漢</td>
                <td class="pt">籍貫</td>
                <td>漢</td>
                <td class="pt">出生地</td>
                <td>山東</td>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </template>
    
  <script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
        required: true,
      },
    },
    data() {
      return {
        myPrint: {
          id: 'myprintDom',
          extarCss: ''
        }
      }
    },
    methods: {
      print() {
        this.$refs['printbtn'].click();
      }
    },
  }
  </script>