先在的需求是 先获取打印的模板,用户选择过的模板通过接口要回显出来,预览只显示key的值,value是前端写死
需求视频
max_data 是黑色部分,small_data 是select 的下拉部分,获取用户设置过的接口跟整个模板接口数据类型是一样的,选择框旁边的加号和减号出现的条件是 ,没有选择过的第一个是加号,选择到没有数据了,出现减号。
还有数据的话最后一个选择框出现一个加号一个减号,其余的是一个减号
预览
<template>
<div class="printInfo">
<div @click="onPreview" class="preview_font">预览</div>
<div class="print_item" v-for="(item, index) in selectList" :key="index">
<div class="title">
<div class="title-left" v-if="item.max_data">{
{ item.max_data.name }}</div>
</div>
<div class="info">
<div class="select_item" v-for="(v, i) in item.choose" :key="i">
<el-select v-model="item.choose[i]" placeholder="请选择">
<el-option v-for="(_item, _index) in item.small_data.filter(temp=>temp.id == v || item.choose.indexOf(temp.id)==-1)" :key="_item.id" :label="_item.name"
:value="_item.id">
</el-option>
</el-select>
<i class="el-icon-remove" v-if="(i != 0 && !!v) || (i == 0 && item.choose.length > 1)"
@click="remove(item, i)"></i>
<i class="el-icon-circle-plus" v-if="(i==0 && !!v && item.choose.length==1) || (i==item.choose.length-1 && item
因篇幅问题不能全部显示,请点此查看更多更全内容