vue打印（二）

1、下载插件

print.js

2、放入plugins文件夹下

3、在main.js引入

import Print from './plugins/print'
Vue.use(Print) // 注册

 4、使用例子

注意点：

1. 在需要打印的地方绑定ref
2. 不需要打印的地方添加no-print样式类
3. 打印方法：this.$print(this.$refs.xxx)，xxx代表你绑定的ref

4. 也可以自定义不需要打印的样式类，使用方法如下：

5. <div class="not-print-me">不要打印我</div>
   this.$print(this.$refs.print,{'no-print':'.not-print-me'}) // 使用

<el-dialog  ref="print" title="列操作" :visible.sync="colOprationVisible" width="600px" >
        <div  style="height:400px;overflow:auto;">
            <el-table :data="formList" style="width: 100%" border height="400" width="100%">
                <el-table-column align="center" width="100px" prop="prop"  label="列名"></el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.show" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9"
                        @change="changeSwitch(scope.row)"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer no-print">
            <el-button type="primary" @click="colOprationVisible = false">关 闭</el-button>
            <button @click="printTest">打印</button>
        </span>
    </el-dialog>

printTest(){
    this.$print(this.$refs.print)
},