有关打印预览时原生表格table的使用

最新推荐文章于 2024-08-23 13:45:37 发布

lyweb32

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量269

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_45868673/article/details/125291642

版权

// component  preview
<template>
  <table border="1" width="99%" style="border-bottom:0;" cellspacing="0">
    <tr>
      <slot name="tableHeader" />
    </tr>
    <slot name="tableContent" />
    <tr>
      <slot name="tableFooter" />
    </tr>
  </table>
</template>

<script>
export default {
  name: 'Preview',
  props: {},
  data () {
    return {

    }
  }
}
</script>

<style scoped>

</style>


// 在父组件中引入preview import preview from 'preview'
 <preview>
        <template slot="tableHeader">
          <th v-for="(item,index) in stockInLabelList" :key="index">
            {{ item }}
          </th>
        </template>
        <template slot="tableContent">
          <tr v-for="(item,index) in detailsData" :key="index">
            <td>
              {{ index + 1 }}
            </td>
            <td>
              {{ item.id }}
            </td>
            <td>
              {{ item.productname }}
            </td>
            <td>
              {{ item.attribute }}
            </td>
            <td>
              {{ item.barcode || '-' }}
            </td>
            <td>
              {{ item.nit }}
            </td>
            <td>
              {{ getInProductCount(item) }}
            </td>
            <td>
              {{ item.give }}{{ item.unit }}
            </td>
            <td>
              {{ item.count }}{{ item.unit }}
            </td>
            <td>
              {{ item.price / 100 }}
            </td>
            <td>
              {{ item.inprice / 1000 }}
            </td>
            <td>
              {{ (item.count - item.give) * item.inprice / 1000 }}
            </td>
            <td>
              {{ (item.netReceipts / (item.count - item.give) / 100).toFixed(3) }}
            </td>
            <td>
              {{ item.netReceipts / 100 }}
            </td>
          </tr>
        </template>
      </preview>