vue打印(二)
1、下载插件print.js2、放入plugins文件夹下3、在main.js引入import Print from './plugins/print'Vue.use(Print) // 注册4、使用例子注意点:在需要打印的地方绑定ref不需要打印的地方添加no-print样式类打印方法:this.$print(this.$refs.xxx),xxx代表你绑定的ref也可以自定义不需要打印的样式类
·
1、下载插件
2、放入plugins文件夹下
3、在main.js引入
import Print from './plugins/print'
Vue.use(Print) // 注册
4、使用例子
注意点:
- 在需要打印的地方绑定ref
- 不需要打印的地方添加no-print样式类
- 打印方法:this.$print(this.$refs.xxx),xxx代表你绑定的ref
也可以自定义不需要打印的样式类,使用方法如下:
<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)
},
更多推荐
已为社区贡献15条内容
所有评论(0)