vue项目中,多选列表,批量打印

Posted 2023-04-27

参考技术A 项目需要

将文本和列表框打印到客户准备的固定大小的材料上
期初效果是这样,如下图

这样得设置纸张大小,边距,居中,而且还不一定每张纸都打印正确,会出现如下图情况

后面百度
通过 https://blog.csdn.net/weixin_41488294/article/details/81705171?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7Edefault-3.queryctr&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ELandingCtr%7Edefault-3.queryctr&utm_relevant_index=5
了解到 page-break-after:always 实现页面分页打印
这样,可以给需要打印的容器设定该属性,即可实现,打印完后进行第二个内容分页.
这样不管内容有多少个,都会在新的页面打开进行打印

template部分

js部分

从另一个组件填充 vue 多选下拉列表

【中文标题】从另一个组件填充 vue 多选下拉列表

【英文标题】：Fill vue multiselect dropdown from another component

【发布时间】：2022-01-19 19:27:37

【问题描述】：

我目前正在做一个项目，需要一些帮助。

我有一个带有端点的后端，它提供一个包含大约 13k 个条目的字符串数组。我在 DropdownSearch.vue 中创建了一个组件，它应该用于具有不同输入的多个不同视图。为此，我使用了 vueform/multiselect。如果我只尝试在没有任何信息的情况下添加下拉列表，它就可以完美地工作。此外，如果我访问端点和 console.log()，它将正常工作并为我提供输出。但是，如果我尝试将输出初始化为下拉菜单，整个页面将停止工作，端点不会给我响应并且应用程序会冻结。

DropdownSearch.vue

  <div>
    <Multiselect
      class="float-left"
      v-model="valueDropdownOne"
      mode="tags"
      :placeholder="selectorOne"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownOne"
      :groups="true"
    />

    <Multiselect
      class="float-left"
      v-model="valueDropdownTwo"
      mode="tags"
      :placeholder="selectorTwo"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownTwo"
    />

    <Multiselect
      class="float-left"
      v-model="valueDropdownThree"
      mode="tags"
      :placeholder="selectorThree"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownThree"
    />
  </div>
</template>

<script>
import Multiselect from "@vueform/multiselect";
import  ref from "vue"

export default 
  name: "DropdownSearch",
  components:  Multiselect ,
  props: 
    selectorOne: 
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    ,
    selectorTwo: 
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    ,
    selectorThree: 
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    ,
    dropdownOne: 
        type: Array
    
    ,
    dropdownTwo: 
        type: Array
    ,
    dropdownThree: 
        type: Array
    
  ,
  setup() 
    const valueDropdownOne = ref()
    const valueDropdownTwo = ref()
    const valueDropdownThree = ref()

    return valueDropdownOne, valueDropdownTwo, valueDropdownThree
  
;
</script>

<style src="@vueform/multiselect/themes/default.css"></style>

数据银行.vue

<template>
  <div>
    <DropdownSearch
      selectorOne="Merkmale auswählen"
      :dropdownOne="dropdownOne"
      selectorTwo="Monographien auswählen"
      :dropdownTwo="dropdownTwo"
      selectorThree="Orte auswählen"
      :dropdownThree="dropdownThree"
    ></DropdownSearch>
  </div>
</template>

<script>
import DropdownSearch from "../components/DropdownSearch.vue";
import  ref, onMounted  from "vue";

export default 
  components:  DropdownSearch ,
  setup() 
    const dropdownOne = ref([]);
    const dropdownTwo = ref([]);
    const dropdownThree = ref([]);

    const getPlaces = async () => 
      const response = await fetch("http://127.0.0.1:5000/project/get-places");
      const places = await response.json();

      return places;
    ;

    onMounted(async () => 
      const places = await getPlaces();
      dropdownThree.value = places;
    );

    return 
      dropdownOne,
      dropdownTwo,
      dropdownThree
    ;
  ,
;
</script>

<style lang="scss" scoped></style>

【参考方案1】：

不是vue的问题 你使用的库可能不支持virtual-list，当数据量变大时，实际的dom元素也会变大

您可能需要找到另一个支持虚拟列表的库，仅在可视范围内渲染 dom 或通过 virtual-library 实现自定义组件

【讨论】：

还有其他优化方法吗？我尝试使用包含 15k“Hello”的数组初始化下拉列表，效果非常好

【参考方案2】：

我找到了给定问题的解决方案，正如@math-chen 已经说过的那样，问题是在实际 Dom 中将解决的数据量变得非常大。您可以限制显示的条目数量，而不是使用虚拟列表，这可以通过添加轻松完成

limit:"10"

对于多选组件，过滤所有项目可以很容易地由javascript自己处理。