vue之打印表格的实现

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>