(练习)vue2 v-model数据双向绑定 打印数据 以及使用 (2)

 一,安装 print  打印

安装
To install using npm:
 
 
  npm install print-js --save
 
To install using yarn:
 
 
  yarn add print-js

二,页面效果

三,完整代码 

 
   <template>
  <div>
    <table width="100%" height="100%" border="1">
      <tr>
        <td colspan="1">1</td>
        <td colspan="1">员工姓名</td>
        <input  v-model="name" style="color: red; width: 100px" />
        <td colspan="3">员工部门</td>
        <input v-model="department" style="color: red; width: 100px" />
      </tr>
    </table>
 
    <table width="100%" height="100%" border="1">
      <tr>
        <td colspan="1">2</td>
        <td colspan="1">所在职位</td>
        <input v-model="position" style="color: red; width: 100px" />
        <td colspan="3">考核吐槽项目</td>
        <input  v-model="message" style="color: red; width: 100px" />
      </tr>
    </table>
 
	<table width="100%" height="100%" border="1">
      <tr>
        <td colspan="1">3</td>
        <td colspan="1">a</td>
        <input type="number" v-model="a" style="color: red; width: 100px" />
		<td colspan="1">*</td>
		<td colspan="1">b</td>
        <input type="number" v-model="b" style="color: red; width: 100px" />
       <td colspan="3">是否满足( > 1593)</td>
        <td colspan="3">{{ this.list }}</td>
      </tr>
    </table>
    <button @click="jsonPrint">打印</button>
  </div>
</template>
   <script lang="ts">
import printJS from "print-js";
export default {
  data() {
    return {
	  fraction: '',       //分数 
	  name: "",           //名字
      department: '',     //部门
      message: "",        //吐槽
      position: "",       //职位
	  a:'',               //分数1
	  b:''                //分数2
    };
  },
  computed: {
	// 计算分数总数
    num() {
      return this.a * this.b ;
    },
	// 改变吐槽展现形式
    reverseMessage() {
      return this.message.split("")
    //   return this.message.split("").reverse().join("");
 
    },
 
	// list  是判断num的满足条件
    list() {
      if (this.num > 1593) {
        return "满足";
      } else {
        return "不满足";
      }
    },
  },
 
  methods: {
    jsonPrint() {
      printJS({
        printable: [], //表格的数据
        header: `<div style="display: flex;flex-direction: column;text-align: center">
						<table border="1" width="100%" height="100%"  >
							<tr>
								<!-- colspan跨n列 -->
								<td colspan="12">学生作业考核评价表</td>
							</tr>
							<tr>
								<td colspan="2">员工姓名</td>
								<td colspan="2" >${this.name}</td>
								<td colspan="1">部门</td>	
								<td colspan="3">${this.department}</td>
								<td colspan="2">所在职位</td>	
								<td colspan="2">${this.position}</td>
							</tr>
							<tr>
								<td colspan="3">考核吐槽项目</td>
								<td colspan="3">${this.reverseMessage}</td>
								<td colspan="1">考核分数</td>
								<td colspan="5"> ${this.num}</td>
							</tr>
							<tr>
								<td colspan="4">考核结果</td>
								<td colspan="8">${this.list}</td>
							</tr>
							</table>
							<table border="1" width="100%" height="100%">
								<tr>
								<td colspan="1">序号</td>
								<td colspan="1">项目</td>
								<td colspan="4">考核标准评分</td>	
								<td colspan="2">自我评分</td>
								<td colspan="2">老师评分</td>	
								<td colspan="3">综合评分</td>
							</tr>
							<tr>
								<td rowspan="4">1</td>
								<td rowspan="4">考勤状况及态度考核</td>
								<td colspan="4">出勤情况:满勤,无请假迟到早退等情况(满分10分)</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
							</tr>
							<tr>
								<td colspan="4">工作积极性:主动承担分内工作,对本人职责范围内的工作无推诿(满分10分)</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
							</tr>
							<tr>
								<td colspan="4">责任意识:本职工作有责任心,及时完成交付的工作,无拖延(满分10分)</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
							</tr>
							<tr>
								<td colspan="4">协作与配合:与上下级,同事工作配合度(满分10分)</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
								<td colspan="2">7</td>
							</tr>
							
							</table>
						
                    </div>`,
        properties: [
          //表头
          // {field: 'id', displayName: '地区', columnSize: `10%`},
          // {field: 'text', displayName: '确认跳闸条数',columnSize: `65%`},
          // {field: 'num', displayName: '误报条数'},
          // {field: 'powerOutageTotalNum', displayName: '跳闸总条数'},
          // {field: 'powerOutageErrorIndex', displayName: '误报指数', columnSize: `10%`},
        ],
        type: "json",
        gridHeaderStyle: "border: 1px solid #000;text-align:center",
        gridStyle: "border: 1px solid #000;text-align:center",
        style:
          " span {color :red ;width: 300px;border: 1px solid #000;	display: flex; }", // 表格样式
      });
    },
  },
};
</script>
   
   <style>
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值