云企网站,网络系统管理技能大赛linux,wordpress 秀,网易黄页目录
一、实现效果 二、实现步骤
【1】安装插件
【2】在需要打印的页面导入
【3】在vue文件中需要打印的部分外层套一层div#xff0c;给div设置id。作为打印的区域
【4】在打印按钮上添加打印事件
【5】在methods中添加点击事件
三、完整代码 一、实现效果 二、实现步…目录
一、实现效果 二、实现步骤
【1】安装插件
【2】在需要打印的页面导入
【3】在vue文件中需要打印的部分外层套一层div给div设置id。作为打印的区域
【4】在打印按钮上添加打印事件
【5】在methods中添加点击事件
三、完整代码 一、实现效果 二、实现步骤
print.js插件可以打印html、pdf、json数据等。
官网https://printjs.crabbly.com/
【1】安装插件
npm install print-js --save
【2】在需要打印的页面导入
import print from print-js
【3】在vue文件中需要打印的部分外层套一层div给div设置id。作为打印的区域
el-table :datashowData idprintBox styledisplay: flex;el-table-column typeindex label序号 width180 aligncenter/el-table-columnel-table-column propadminname label账号 aligncenter/el-table-columnel-table-column label权限 aligncentertemplate #default{ row }el-tag v-ifrow.role 1 type effectdark管理员/el-tagel-tag v-else-ifrow.role 2 typewarning effectdark超级管理员/el-tagel-tag v-else typeinfo effectdark未知/el-tag/template/el-table-columnel-table-column label操作 aligncentertemplate #default{ row }el-button circle typesuccess clickeditHandler(row)el-iconEdit/Edit/el-icon/el-buttonel-popconfirm title你确定删除吗? confirm-button-text是 cancel-button-text取消 confirmdelHandler(row)template #referenceel-button circle typedangerel-iconDelete/Delete/el-icon/el-button/template/el-popconfirm/template/el-table-column/el-table
【4】在打印按钮上添加打印事件 el-button typeprimary clickprintBox打印/el-button【5】在methods中添加点击事件
必要的就是printable和bype
methods: {printBox() {setTimeout(function () {print({printable: printBox,type: html,scanStyles: false,targetStyles: [*]})}, 500)},
}
三、完整代码
templateel-breadcrumb classbreadcrumb separator/el-breadcrumb-item :to{ path: /layout }主页/el-breadcrumb-itemel-breadcrumb-item账号管理/el-breadcrumb-itemel-breadcrumb-item管理员列表/el-breadcrumb-item/el-breadcrumbdiv!-- 按钮 --el-button typeprimary clickopenAdd添加管理员/el-buttonel-button typeprimary clickprintBox打印/el-button!-- 表格 --el-table :datashowData idprintBox styledisplay: flex;el-table-column typeindex label序号 width180 aligncenter/el-table-columnel-table-column propadminname label账号 aligncenter/el-table-columnel-table-column label权限 aligncentertemplate #default{ row }el-tag v-ifrow.role 1 type effectdark管理员/el-tagel-tag v-else-ifrow.role 2 typewarning effectdark超级管理员/el-tagel-tag v-else typeinfo effectdark未知/el-tag/template/el-table-columnel-table-column label操作 aligncentertemplate #default{ row }el-button circle typesuccess clickeditHandler(row)el-iconEdit/Edit/el-icon/el-buttonel-popconfirm title你确定删除吗? confirm-button-text是 cancel-button-text取消 confirmdelHandler(row)template #referenceel-button circle typedangerel-iconDelete/Delete/el-icon/el-button/template/el-popconfirm/template/el-table-column/el-table!-- 分页器 --div classpaginationel-pagination v-model:current-pagecount v-model:page-sizelimitNum :page-sizes[1, 3, 5, 8]layouttotal, sizes, prev, pager, next, jumper :totalallData.length //div!-- 抽屉 --el-drawer v-modelisShowtemplate #headerh4{{ type }} 管理员/h4/templatetemplate #defaultdivel-form :modelformel-form-item label账号 sizesmallel-input v-modelform.adminname/el-input/el-form-itemel-form-item label密码el-input v-modelform.password/el-input/el-form-itemel-form-item label角色el-select v-modelform.roleel-option label管理员 :value1/el-optionel-option label超级管理员 :value2/el-option/el-select/el-form-itemel-form-item label权限el-tree reftreeRef :datatreeData show-checkbox default-expand-all node-keypath:propsdefaultProps //el-form-item/el-form/div/templatetemplate #footerdiv styleflex:autoel-button clickcancelClick取消/el-buttonel-button typeprimary clickconfirmClick确定/el-button/div/template/el-drawer/div
/templatescript
import print from print-js
import { formatRoutes } from /utils/tools
import { getAdminList, addAdmin, updataAdmin, delAdmin } from /apis/user
export default {data() {return {// 当前页码count: 1,// 每页显示条数limitNum: 3,// 所有管理员列表信息allData: [],// 管理员抽屉的数据form: {adminname: ,password: ,role: 1,},// 抽屉是否显示isShow: false,// 区别当前是添加管理员还是更新管理员type: ,// 树节点信息treeData: [],// 要显示的元素defaultProps: {children: children,label: function (data) {// label设置要显示的文字信息lable的值可以是函数return data.meta.title}}};},watch: {isShow(value) {if (!value) {this.form {}}this.$refs.treeRef?.setCheckedNodes([])}},computed: {showData() {return this.allData.slice((this.count - 1) * this.limitNum, this.count * this.limitNum)}},mounted() {this.getAllData(),this.treeData formatRoutes(this.$router.getRoutes())},methods: {printBox() {setTimeout(function () {print({printable: printBox,type: html,scanStyles: false,targetStyles: [*]})}, 500)},delHandler(row) {delAdmin({ adminid: row.adminid }).then(data {this.getAllData()})},cancelClick() {this.isShow false},confirmClick() {this.isShow false// 获取表单数据和树形菜单数据调用 添加、修改接口// getCheckedNodes,选中的节点的数据// 第一个false:选中父节点字节点数据都获取// 第二个true:无论父节点有没有被选中选中的子节点都能获取if (this.type 添加) {addAdmin({...this.form,checkedKeys: this.$refs.treeRef?.getCheckedNodes(false, true)}).then(res {this.getAllData()})} else {updataAdmin({...this.form,checkedKeys: this.$refs.treeRef?.getCheckedNodes(false, true)}).then(res {this.getAllData()})}},// 获取所有管理员列表信息getAllData() {getAdminList().then(res {console.log(管理员列表, res)this.allData res.datathis.count 1})},editHandler(row) {this.type 修改,this.isShow truethis.form {adminname: row.adminname,password: row.password,role: row.role}},openAdd() {this.type 添加,this.isShow true}},
};
/scriptstyle langscss scoped
.breadcrumb {margin-bottom: 25px;}.pagination {display: flex;justify-content: center;.el-pagination {margin: 10px;}
}
/style
