element、vue 使用
一、合并
https://www.cnblogs.com/jun-qi/p/11052634.html
二、nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
https://www.jb51.net/article/204737.htm
三、插槽 slot
参照：https://blog.csdn.net/weixin_29085151/article/details/112517822
四、vue ，查询条件清除，再查询，页面一直向右向
表的高度用vh单位 height="72vh"
五、二重数组非空验证 rules prop
el-form 中的
:model="formHeadFields" :rules="formRulesHead"
el-form-item 中 指定列 prop 不用加冒号。
prop="OrderNo"
<el-form ref="myformHead" :model="formHeadFields" :rules="formRulesHead" > <div class="demandOrderLineRow"> <el-col :span="12"> <el-form-item label="内部编号" prop="OrderNo"> <div style="display: flex;width:100%" > <el-input v-model="formHeadFields.OrderNo" type="text" placeholder="" @keyup.enter ="getGoodsApi(this.formHeadFields.OrderNo)" ></el-input> <!-- <el-link :underline="false" style="width:90px;color: rgb(58,142,230);font-size: 14px;cursor: pointer;margin-right:10px;align-items: center;"> <i class="el-icon-search"></i> 选择模板</el-link> --> <el-button type="text" class="buttonClass" @click="OrderNoClick()"> <i class="el-icon-search"></i>选择模板</el-button> </div> </el-form-item> </el-col> </div> </el-form> formHeadFields: { DemandOrderId: 0, EntrustedDate: (this.formHeadPara.OpenType === 'add')?this.base.getDate():'', OrderNo:'', CreateID:'',CreateDate:null,Creator:'',AuditStatus:-1,OrderState:1, }, formRulesHead:{ OrderNo: [ { required: true, message: '内部编号', trigger: 'blur', }, ], },
直接使用rules
<el-form-item label="小数" prop="decimal"> <el-input v-model.number="form.decimal" autocomplete="off" placeholder="请输入小数" :rules="[ { required: true, message: '不能为空'}, { validator: checkDecimal, trigger: 'blur' } ]"> </el-input> </el-form-item>
methods: { checkDecimal(rule, value, callback) { const reg = /^(\d+|\d+\.\d+)$/ if (reg.test(value)) { callback() } else { callback(new Error('请输入合法的小数')) } } }
prop：为当前控件的值 （el-form 中 model 属性的值+控件prop的值 = 定义的变量值）
rules：指定验证内容
<el-form ref="formRefEntrust" :model="formDialog" :rules="formRulesEntrust" > <div class="demandOrderLine"> <div> <el-form-item label="业务种类" prop="selBusinessTypeValue"> <el-select v-model="selBusinessTypeValue" class="dialogFormInputStyle" placeholder="请选择" disabled > <el-option v-for="item in selBusinessType" :key="item.DicValue" :label="item.DicName" :value="item.DicValue"> </el-option> </el-select> </el-form-item> </div> <div class="container" v-for="(item,key) in formDialog.form.demandOrderLine"> <div class="demandOrderLineRow"> <el-col :span="6"> <el-form-item label="出发地" :prop="'form.demandOrderLine.'+key+'.FromAddress'" :rules="formRulesEntrust.FromAddress" > <!-- :rules="{ required: true,message: '请选择出发地',trigger: 'blur'}" --> <el-select v-model="item.FromAddress" class="dialogFormInputStyle FromAddress" > <el-option v-for="item1 in selFromAddress" :key="item1.DicValue" :label="item1.DicName" :value="item1.DicValue" placeholder="起始地"> <span style="float: left;font-size: 12px">{{item1.DicName}}</span> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="目标地" :prop="'form.demandOrderLine['+key+'].ToAddress'" :rules="formRulesEntrust.ToAddress"> <el-select v-model="item.ToAddress" class="dialogFormInputStyle ToAddress" > <el-option v-for="item1 in selToAddress" :key="item1.DicValue" :label="item1.DicName" :value="item1.DicValue" placeholder="目标地"> <span style="float: left;font-size: 12px">{{item1.DicName}}</span> </el-option> </el-select> </el-form-item> </el-col> <el-form-item label="" > <el-col :span="1"> <div class="dmzbutton"> <i class="el-icon-plus" @click="passStreamAdd"></i> <i class="el-icon-minus" v-if="key > 0" @click="passStreamReduce(key)"></i> </div> </el-col> </el-form-item> <el-col :span="6"> <el-form-item label="运费类型" :prop="'form.demandOrderLine['+key+'].FreightType'" :rules="formRulesEntrust.FreightType"> <el-select v-model="item.FreightType" class="dialogFormInputStyle FreightType" placeholder="运费类型" > <el-option v-for="item1 in selFreightType" :key="item1.DicValue" :label="item1.DicName" :value="item1.DicValue" placeholder="运费类型"> <span style="float: left;font-size: 12px">{{item1.DicName}}</span> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="是否加点提货" :prop="'form.demandOrderLine['+key+'].PickTransportGoodsNumber'" > <div class="formItem"> <el-checkbox label="" v-model="item.IsPickTransportGoods" style="margin-right: 20px;" ></el-checkbox> <el-input v-model="item.PickTransportGoodsNumber" v-if="item.IsPickTransportGoods === true" type="text" placeholder="是否加点提货地点数量"></el-input> </div> </el-form-item> </el-col> </div> <div class="demandOrderLineAssign" v-for="(assignItem,assignKey) in item.demandOrderLineAssign"> <div class="demandOrderLineAssignRow"> <el-form-item label="收费车型" :prop="'form.demandOrderLine['+key+'].demandOrderLineAssign['+assignKey+'].CarType'" :rules="formRulesEntrust.CarType"> <el-select v-model="assignItem.CarType" class="dialogFormInputStyle CarType" placeholder="收费车型"> <el-option v-for="item1 in selCarType" :key="item1.DicValue" :label="item1.DicName" :value="item1.DicValue" placeholder="收费车型"> <span style="float: left;font-size: 12px">{{item1.DicName}}</span> </el-option> </el-select> </el-form-item> <el-form-item label="提货类型" :prop="'form.demandOrderLine['+key+'].demandOrderLineAssign['+assignKey+'].PickTransportGoodsType'" :rules="formRulesEntrust.PickTransportGoodsType"> <el-select v-model="assignItem.PickTransportGoodsType" class="dialogFormInputStyle PickTransportGoodsType" > <el-option v-for="item1 in selPickTransportGoodsType" :key="item1.DicValue" :label="item1.DicName" :value="item1.DicValue" placeholder="提货类型"> <span style="float: left;font-size: 12px">{{item1.DicName}}</span> </el-option> </el-select> </el-form-item> <el-form-item label="" > <div class="dmzbutton"> <i class="el-icon-plus" @click="lineAssignAdd(key)"></i> <i class="el-icon-minus" v-if="assignKey > 0" @click="lineAssignReduce(key,assignKey)"></i> </div> </el-form-item> </div> <div class="demandOrderLineAssignRow"> <el-form-item label="" prop=""> <el-col :span="1"> <i class="el-icon-search" style="color: rgb(58,142,230);font-size: 13px;cursor: pointer;margin-right:10px" @click="carrierChoose(key,assignKey)"></i> </el-col> </el-form-item> <el-col :span="3" class="demandOrderLineAssignRow"> <!-- :prop="'demandOrderLineAssign['+assignKey+'].CarrierNo'" --> <el-form-item label="车牌号" :prop="'form.demandOrderLine['+key+'].demandOrderLineAssign['+assignKey+'].CarrierNo'" :rules="formRulesEntrust.CarrierNo"> <el-input v-model="assignItem.CarrierNo" type="text" class="dialogFormInputStyle" placeholder="车牌号" disabled></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="备案车型" > <el-input v-model="assignItem.CarrierType" type="text" class="dialogFormInputStyle" placeholder="备案车型" disabled></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="司机姓名" > <el-input v-model="assignItem.DriverName" type="text" class="dialogFormInputStyle" placeholder="司机姓名" disabled></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="司机电话" > <el-input v-model="assignItem.DriverNumber" type="text" class="dialogFormInputStyle" placeholder="司机电话" disabled></el-input> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="司机身份证" > <el-input v-model="assignItem.DriverIdCard" type="text" class="dialogFormInputStyle" placeholder="司机身份证" disabled></el-input> </el-form-item> </el-col> </div> </div> </div> <div style="text-align: center; margin-top: 10px"> <el-button type="primary" size="small" @click="saveLine()" >保存</el-button > <el-button type="primary" size="small" @click="this.$emit('closedialog', false)" >关闭</el-button> </div> <carrier-model v-if="showCarDialog" ref="popCarrierWindow" :open="showCarDialog" v-on:closedialog="showCarDialog = $event" :refreshList="search" :fromLinePara="fromLinePara" @parentChangeEvent="parentChangeEvent" ></carrier-model> </div> <!-- </el-form-item> --> </el-form>
data() { return { showCarDialog: false,//电子委托选择车 selBusinessTypeValue:'', activeNames: ['1'], // showDialog: false, model: false, loadKey: true, selBusinessType:[], selFromAddress:[], selToAddress:[], selFreightType:[], selCarType:[], selPickTransportGoodsType:[], fromLinePara: { LineIndex: 0, AssignIndex: 0, }, formDialog:{ form:{ demandOrderLine:[{LineId:0,Lnno:0,CoNumber:'',FromAddress:'',ToAddress:'',FreightType:'',IsPickTransportGoods:false,PickTransportGoodsNumber:'', demandOrderLineAssign:[{Id:0,PCNumber:'',CarType:'',PickTransportGoodsType:'',ClientBus:'',CarrierNo:'',CarrierType:'',DriverNumber:'',DriverName:'',DriverIdCard:'',DemandOrderId:0,LineId:0}], }], } }, formRulesEntrust:{ FromAddress: [ { required: true, message: '请选择出发地', trigger: 'blur', }, ], ToAddress: [ { required: true, message: '请选择目标地', trigger: 'blur', }, ], FreightType: [ { required: true, message: '请选择运费类型', trigger: 'blur', }, ], CarType: [ { required: true, message: '请选择收费类型', trigger: 'blur', }, ], PickTransportGoodsType: [ { required: true, message: '请选择提送货类型', trigger: 'blur', }, ], CarrierNo: [ { required: true, message: '请选择车辆信息', trigger: 'blur', }, ], }, }
六、el-table指定汇总列
<el-table :row-key="(row) => row.Id" :data="listData" border show-summary :summary-method="summaryColumn" style="width: 100%"> <!-- <el-table-column prop="Id" label="ID" > </el-table-column> --> <el-table-column prop="CostName" label="费用名称" width="120px"></el-table-column> <el-table-column prop="AgentName" sortable label="供应商"></el-table-column> <el-table-column prop="Qty" sortable label="数量" width="85px"></el-table-column> <el-table-column prop="Price" sortable label="单价" width="85px"></el-table-column> <el-table-column prop="Curr" sortable label="币别" width="85px"></el-table-column> <el-table-column prop="Amount" sortable label="金额" width="85px"></el-table-column> <el-table-column prop="SettleCurr" sortable label="核算币别" width="85px"></el-table-column> <el-table-column prop="SettleAmount" sortable label="核算金额" width="85px"></el-table-column> </el-table>
summaryColumn(param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '合计'; return; } const values = data.map(item => Number(item[column.property])); if (column.property == 'Qty'||column.property == 'Amount'||column.property == 'SettleAmount') { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); sums[index]; } }); return sums },
七、vue app.config.globalProperties 全局变量使用
app.config.globalProperties.$global = { signalR: false, //是否开启signalR menuSearch:true,//菜单是否启用搜索功能 table: { smallCell:false,//表格单元格大小 useTag: true //table组件下拉框数据源的字段是否显示背景颜色 }, audit: { //审核选项 data: [ { text: '通过', value: 1 }, { text: '拒绝', value: 3 }, // { text: '驳回', value: 4 } ], status:[0,2] //审核中的数据 // 待审核 = 0, // 审核通过 = 1, // 审核中 = 2, // 审核未通过 = 3, // 驳回 = 4 } }
import { defineComponent, ref, reactive, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
auditParam.data = proxy.$global.audit.data;
import { defineComponent, reactive, ref, watch, onMounted, getCurrentInstance, } from "vue"; let _config = getCurrentInstance().appContext.config.globalProperties; _config.$global.signalR
八、生成二维码
1.qrcodejs2 它不是组件，所以组件处不用定义。
先安装：npm install qrcodejs2
例1： <div id="qrcode"></div> // 引入 qrcodejs2 import QRCode from 'qrcodejs2'; // 创建二维码 new QRCode(document.getElementById('qrcode'), { text: 'http://www.yoururl.com', width: 128, height: 128, colorDark : '#000000', colorLight : '#ffffff', correctLevel : QRCode.CorrectLevel.H }); 例2： <div id="codeId" ></div> mounted() { this.getCode(); this.print(); }, getCode() { let text = 'addaee'; //内容 let params = { text, width: 100, height: 100, }; let code = new QRCode("codeId", params); code.clear(); //清除二维码 code.makeCode(text); //生成另一个新的二维码 },
2.使用 qrcode-vue 在打印的时候可能会有问题
先安装：npm install qrcode-vue
<template> <qrcode value="Hello, World!" :options="{ width: 200 }"></qrcode> </template> <script> import { Qrcode } from 'qrcode-vue'; export default { components: { Qrcode } }; </script>
