随笔分类 - VUE-CLI3
摘要：批量打印 ： 1.用到print.js 自行安装 安装完成后 引用 import printJS from 'print-js'; 2.用到深拷贝 深拷贝代码：（可以将此代码放在一个页面中，对此进行引用即可，例如：放在until文件中，引用代码 import { deepClone } from '
阅读全文
摘要：样式 ： pointer-events: none; <el-form-item label="xxx" prop="saleId" > <base-selectPage v-model="ruleForm.saleId" :data="subSalesList.length ? subSalesL
阅读全文
摘要：<el-button type="button" @click=" handleCopy "> 批量打印 </el-button> handleCopy(){ if (!this.getSelectRows()) return; if(this.selectRows.some(r => r.star
阅读全文
摘要：思路：当点击options的时候，让select 失去焦点（跳到其他的地方），添加el-input 就是为了把光标跳转到其上面，然后将其隐藏掉，则为看不到光标点， 但是在点击第一次之后获取焦点focus之后，隐藏掉下拉菜单的时候 @blur是无效的，此时只能通过监听下拉框是否是隐藏和显示状态来让其失
阅读全文
摘要：<el-form ref="form" :model="form" label-width="90px" :rules="rules" class="demo-ruleForm"> <el-form-item label="公海回收规则:" prop="authocherk"> <el-radio-
阅读全文
摘要：1. 全局引入formcCreate main.js import formCreate from '@form-create/element-ui'//表单设计器引入 Vue.use(formCreate) <form-create v-model="fApi" :rule="freeRule"
阅读全文
摘要：<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent> <el-form-item label="表单名"
阅读全文
摘要：解决el-table 中table表勾选回显问题 解决思路： 1.先根据要求获取对应的所有的数据 2.跟后台进行协商，获取一个不同的表示，根据此表示进行判断 即可 eg: this.data 是从后台获取的数据，对此数据进行判断循环 this.data.forEach((item)=>{ 使用thi
阅读全文
摘要：针对element 的el-table 大数据量的勾选卡顿问题 ，有多种的解决方案，但是我更加倾向于使用uMy-ui 使用方法： 1. 安装 npm install umy-ui 2.引用： 2.1 完整引入 在 main.js 中写入以下内容： import Vue from 'vue'; imp
阅读全文
摘要：1.在vue中使用到input输入框的时候，会是很常见的情况，但是在不同的情况下我们使用的事件也会是不同的，比如，change,blur，input ... change 是改变事件。 blur是失去光标事件，focus是聚焦事件，input 是输入框的输入事件 2.如果是在一个列表中，如果我们需要
阅读全文
摘要：1.新建一个文件 加入代码 const Base64 = { //加密 encode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, p1) { re
阅读全文
摘要：当我们学习vue的时候，数据的请求也是很重要的 在处理数据请求的时候，我们会遇到一会跨域的问题，例如这样，就是我们遇到了跨域的问题 Access to XMLHttpRequest at 'https://vue3-fjord-81553.herokuapp.com/api/resources' f
阅读全文
摘要：vue cli3 router-link 跳转 在页面中 <template> <div> <router-link class="" to="./ResourceHome"> 首页 </router-link> <router-link class="" to="./ResourceNew"> 新
阅读全文
摘要：vue cli3 的重定向无非就是使用redirect来实现 const routes = [ {path:"/", name:"base"，redirect:{name:"ResourceHome"}}, {path:"/new", component:ResourceNew， children:
阅读全文
摘要：vue cli3 的子路由 无非就是在父级路由下创建一个子级路由children来包括起来 const routes = [ {path:"/", component:ResourceHome}, {path:"/new", component:ResourceNew， children:[ {pa
阅读全文
摘要：vue cli3的路由创建方式 1.在src的文件夹中创建一个文件router.js的文件，这个里面可以专门用来存放路由的 2.在router.js的文件中存放路由，则需要引入两个文件（createRouter,createwebHistory) import{createRouter,create
阅读全文
摘要：3个页面之间互相传值，取值 app.vue(父级页面) first.vue（子级页面） second.vue（子级页面） 先声明页面情况:把数据定义在app.vue（父级）中，first.vue（子级）需要拿到定义在app.vue（父级）中的数据，second.vue（子级）需要通过app.vue(
阅读全文
摘要：VUE3动态的改变样式的方式 <button :class=" `btn btn-sm ${toggleBtn}` ">{{!isDisabled :"更新":"详情"}}</button> <script> import(ref,computed) from "vue" export defaul
阅读全文
摘要：v-if 适用于切换 eg:组件之间的切换 两个子组件 父组件 app.vue 子组件 first.vue 子组件second.vue 父组件中： <template> <button @click="isResourceFirst = !isResourceFirst ">切换</button>
阅读全文
摘要：计算有多少条数据，并显示数据的个数（有两种方法，一种是函数的写法，一种是属性的计算使用computed） <template> 函数的写法 ：{{getResourceListLength()}} 计算属性的写法：{{getResourceListLength}} </template> <scri
阅读全文
