vue之打印表格的实现

最新推荐文章于 2024-08-06 16:10:14 发布

小小亮01

最新推荐文章于 2024-08-06 16:10:14 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue.js react.js node.js

本文链接：https://blog.csdn.net/weixin_43845137/article/details/121665423

版权

vue 专栏收录该内容

28 篇文章 4 订阅

订阅专栏

vue之打印表格的实现

安装：yarn add vue-print-nb
局部引入：import print from "vue-print-nb";
挂载指令：directives: { print, },

实现简单的打印

在这里插入图片描述

操作：
- 1：<button v-print="'#printTable'">打印table</button>
- 2：<div id="printTable"></div>

<template>
  <div class="home">
    model {{ model }}
    <x-from :model="model" labelWidth="80px" id="printTable">
      <x-form-item label="用户名">
        <x-input
          placeholder="请输入用户名："
          v-model="model.username"
        ></x-input>
      </x-form-item>
      <x-form-item label="开关">
        <x-switch
          v-model="model.flag"
          activeColor="red"
          inActiveColor="green"
          name="username"
        ></x-switch>
      </x-form-item>
    </x-from>
    <button v-print="'#printTable'">打印table</button>
  </div>
</template>

<script>
import XInput from "./Test/Input.vue";
import XSwitch from "./Test/Switch.vue";
import XFrom from "./Test/form/Form.vue";
import XFormItem from "./Test/form/FormItem.vue";
import print from "vue-print-nb";
export default {
  name: "Home",
  directives: {
    print,
  },
  components: {
    XInput,
    XSwitch,
    XFrom,
    XFormItem,
  },
  data() {
    return {
      // form 绑定的数据
      model: {
        username: "",
        flag: false,
      },
    };
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: calc(100% - 34px);
  width: calc(100% - 34px);
  background: #fff;
  padding: 16px;
  border: 1px solid #ccc;
}
</style>