VUE
VUE
极光雨雨
“芝士”与你分享 ———纳西妲
展开
-
VUE专题 自定义element输入框校验方式
template中其中这里看到的标签可能和实际使用的elementUI中不一致,实际上只是稍微换了下大小写和显示的名称,下面其实都是原生的elementUI组件。下面是联系方式的自定义校验,主要看 :rules中的内容<ELCol :span="12"> <FormItem label="联系方式" prop="phonenumber" :rules="{validator: validTelNumber, trigger: 'blur' }" required> <原创 2021-05-03 20:35:46 · 1013 阅读 · 0 评论 -
VUE专题 ElementUI年限输入框校验
Template中<ELCol :span="12"><CommonFormItem label="项目年限" prop="foreignEntity.buildTime" :rules="{validator: validBuildTime, trigger: 'blur' }"><ElInput placeholder="请输入年限例如 2020-2021" v-model="projectData.foreignEntity.buildTime" :readonly原创 2021-06-14 17:11:14 · 444 阅读 · 0 评论 -
VUE专题 V-for 循环style(样式)的方式尝试与总结
标签中这里下面的红线是因为缺失了:key 做区分的原因,可以后来补上,这里演示暂不处理对应数据methods中的方法说明这里是为了循环颜色这一属性,通过第二部分中对应数据传入的值不同,在方法中拼接传入不同的值并直接在方法中返回样式的值。...原创 2021-05-02 20:53:02 · 1856 阅读 · 1 评论 -
VUE专题 前端API请求方法路径中拼接参数,以及在后台的取值
API中export function deleteById (data) { return request({ url: '/opinion/provinceOpinion/' + data, method: 'delete' })}后台接收处@DeleteMapping("/provinceOpinion/{id}") public String delete(@PathVariable("id") String id) { .......... .......... .原创 2021-04-18 12:22:47 · 2317 阅读 · 0 评论 -
VUE专题 elementUI中表格操作列显示设置案例
例子如下使用的标签都是elementUI中的标签,有的稍稍换了个名,总的是一致的tableColumn当前列,重点依旧是template标签这里使用row也就是当前这条记录的实体,row后面的就是这条记录中的属性,这里做了判断和点击事件。scope.$index是当前记录的索引scope.row就是当前记录的实体,包含了这一条记录的所有属性这里将这两个参数直接放到点击事件的方法中,在写对应方法时,直接在方法参数中声明两个参数就在可以直接拿到对应参数例如第一个方法可在script的meth原创 2021-05-02 20:11:31 · 1670 阅读 · 0 评论 -
VUE专题 ElementU加入表格拖拽功能 加入注意点
Script引入中加入先引入拖拽的JS依赖与script中的import同级let Sortable = require('@/libs/Sortable.js')Methods:/*** 排序方法*/setSort(){const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]this.sortable = Sortable.creat原创 2021-06-14 17:45:50 · 188 阅读 · 0 评论 -
VUE专题 VUE起步知识提炼
Vue 介绍Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。组件式编程一个页面可以分解如下,组件化单个模块就提高了复用。这个理念不是来源于vue, 把web组件式开发发扬光大的应该是react了,组件开发是一种朴素的开发思想,分而治之,大型系统拆分成一个个的小模块小组件原创 2021-04-11 13:11:31 · 149 阅读 · 2 评论 -
VUE专题 ElementUI+VUE DatePicker设置项,选择今天以及禁用
Template中<ELCol :span="12"><CommonFormItem label="日期" prop="foreignEntity.approvalDate" required><DatePicker v-model="projectData.foreignEntity.approvalDate" value-format="yyyy-MM-dd" type="date"style="width: 100%;" :disabled="isReadonly原创 2021-06-14 17:07:26 · 372 阅读 · 0 评论 -
VUE专题 elementUI自定义校验方式 form-item
Template中这里的标签都使用 类似的原生elementUI标签即可<ELCol :span="11"><CommonFormItem label="手机" prop="phoneNumber" :rules="{validator: validTNumber, trigger: 'blur' }" required ><ElInput v-model="fields.phoneNumber" placeholder="请输入手机号码" :readonly="!i原创 2021-06-14 17:24:34 · 409 阅读 · 0 评论 -
VUE专题 V-for ID绑定写法 V-for el-checkbox中取值
V-for ID绑定写法<el-checkbox class="file" v-for="(domain, index) in requireFile" :key="index" :id="'mustCheck'+index" v-model="!domain.valid" readonly size="small">{{domain.name}}</el-checkbox>书写时绑定循环可改变的值,主要如下写法:id="‘mustCheck’+index"index取的是原创 2021-06-14 18:57:17 · 2720 阅读 · 0 评论 -
VUE专题 渲染问题,方法在页面渲染前执行,导致不能在页面中实现效果 + Tabs标签监听
我的环境是需要在监听方法中加入如下方法,如有需要加入到其他环境中//监听某个值发生变化 改变后调用对用子页面的方法,且方法放到渲染之后执行 $nextTickthis.$nextTick(()=>{ 放入要放在对应页面渲染后执行的方法})强行刷新方法This.$forceUpdate()// 渲染视图this.$forceUpdate()同步方式this.$nextTick(async ()=>{放入要放在对应页面渲染后执行的方法})Tab中子页签的写法&原创 2021-04-18 12:50:42 · 823 阅读 · 0 评论 -
VUE专题 elementUI中tableColumn 的formatter用法
示例一页面中对应方法示例二对应方法这里是为了截取前面的时间戳原创 2021-05-02 21:01:40 · 1714 阅读 · 0 评论 -
VUE专题 组件中 key的作用和妙用
若其中一个组件(写好的页面)如下<addTransferunit :key="timer" @need-close="editVisible=false" @sendTranUnit="getTranUnit"windowHight='700px'></addTransferunit>对组件的 :key 是否识别为同一个组件相当于一个标识符当值发生改变时说明不是同一个组件,将会进行重新加载和渲染。这个值的变化帮我解决了一个组件强制重新加载的问题。相当于重置了那个写好的原创 2021-04-18 12:31:19 · 758 阅读 · 0 评论 -
VUE专题 组件中的重要组成(选项) data+methods+watch+computed
datadata:Vue实例的数据对象。在Vue页面中,子组件可能会对此实例化和调用,所以为了确保子组件数据的独立性和隔离性,组要使用data(){return{}}的方法,每次返回一个新的对象。export default { name:'my-vuePage', data(){ return { initNum: 0, userName: '', myMap: { key1: '', key2: '' }, initFl原创 2021-04-11 13:51:25 · 540 阅读 · 1 评论 -
VUE专题 elementUI表格中根据当前记录的某一条属性值展示不同的内容
例子 某一列中判断当前记录的某各值这里列对应的属性值不一定非要和当前记录要判断的记录值一致,可以不同,重点看template标签中的内容,以及slot-scope的使用,下面的记录中,row表示的是当前一整条的记录的单个实体,可以取到所有的属性,所以也可以判断其他属性,甚至是多个属性<TableColumnlabel="状态"width="120"prop="feedbackState"header-align="center"align="center"sortable>原创 2021-05-02 19:57:58 · 1349 阅读 · 0 评论 -
WEB开发 El-upload中弹窗打开后默认所有文件中选择 检测回车键调用的方法
说明Fileaccept的值修改为 * 则默认为所有文件,否则传入文件后缀名时弹窗中显示支持的文件格式,需要手动选择所有文件回车键其实就是keyup事件调用原创 2021-05-02 20:47:27 · 472 阅读 · 0 评论 -
VUE专题 elementUI+VUE 使用Blob提供JS文件下载
前端这里的el-button 是在el-table中的table列中<Button type="text" size="small" @click="downloadFile(scope.$index,scope.row)">下载</Button>downloadFile (index, row) {downLoad({fileName:row.fileAllName,filePath:row.filePath}).then(res => {this.downloa原创 2021-06-14 17:32:18 · 473 阅读 · 0 评论 -
VUE专题 同一页面路由 使用特殊标识区分拼接ID
(页面区分同一路由不覆盖)规定route的js中类似如下操作代码中前后都有缩略 并不是全部 主要看path中最后的拼接方式:id 在页面中直接使用$route中的路由拼接即可{path: 'pages1/:id1',name: `${pre}pages1`,component: pages1,meta: {...meta,title: '测试页面1'}},{path: 'pages2/:id2',name: `${pre}pages2`,component: pages2原创 2021-06-14 17:38:05 · 541 阅读 · 0 评论 -
VUE专题 elementUI中 Filter日期转换,将时间显示在一般的div等标签中
filter部分位置说明都在vue的script部分中方法,filter与methods,watch,props等同级template中这里简写例子,直接在div或者font中都可以,下面两个都是时间参数,{{}}是双向绑定参数在在页面的写法页面中<div> <font>{{params.commentsDateStr | formate}}</font><div><div> <font>{{params.recei原创 2021-05-02 20:40:43 · 229 阅读 · 0 评论 -
VUE专题 监控页面路由(route)刷新执行对应方法, 及监控路由带来的数据并执行对应方法
书写位置script部分中这里的路由是指在router的module中指定的 如下例子都是类似的例如:若地址为 http://localhost:8080/#/print/print则监控路由带来的数据,并采用某一方法使用该参数执行方法一般写法// 监听部分watch:{ // 实现跳转回页面数据刷新 $route: function (newVal) { if (newVal.path == '/print/print') { this.getList()原创 2021-05-02 21:07:02 · 499 阅读 · 0 评论 -
VUE专题 常用指令 v-show,v-if,v-for,v-bind,v-on,v-model
v-showv-show:判断谋个元素是否显示或隐藏。true:显示false:隐藏<div v-show="type===0">hello vue</div>........data:{ type:0}v-if v-else v-else-ifv-if/v-else/v-else-if:v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。v-else-if,顾名思义,充当 v-if 的“else-if 块”,可原创 2021-04-11 14:27:52 · 1514 阅读 · 3 评论 -
VUE专题 elementUI中单行溢出时使用气泡展示所有内容
在elementUI的 table组件中需要溢出气泡那一行的 <TableColumn>中 加入 show-overflow-tooltip="true"调整气泡宽度在当前 vue 页面的style部分加入.el-tooltip__popper{max-width: 35% !important;}width 即为气泡宽度。放在<style></style>中 去掉style标签中的scope 则变为全局影响的样式,覆盖所有...原创 2021-04-18 12:19:08 · 828 阅读 · 0 评论 -
VUE专题 ajax(axios)get,post请求,多个请求并发,配置,拦截器等 学习总结
引入方式使用cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>或<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>使用npm方式$ npm install axios使用bower方式$ bower install axios使用yarn方式$ y原创 2021-08-25 15:52:19 · 743 阅读 · 0 评论 -
VUE专题 router路由携带参数在方法中的写法相关总结 + message使用
(如无特殊说明,则最外层都是方法层,里面为具体写法,或者直接就是具体使用)返回上一页,后退效果goBack () { this.$router.go(-1)},携带参数到另一个页面且跳转this.$router.push({ name: 'registration-filingInfo', params: { id: row.id, flag: flag, show: true }})不带参数直接跳转this.$router.push({ name: 'registr原创 2021-04-18 12:11:41 · 376 阅读 · 0 评论 -
VUE专题 ElementUI中 row 和 elcol排版+滚动条添加
<Row> //其中row可以写 :span=”24” 默认24<ElCol :span="12"></ElCol><ElCol :span="12"></ElCol></Row>具体效果row就是代表一行,占用就使用 :span表示,默认24为一行,col自然是列,列的宽度调整也用 :span,排三个列就是 8 8 8其中可以自己的其他的样式组件,一般用来排列表单当一行的Row中col占比超过24则会自动挤到下原创 2021-04-18 12:42:55 · 6405 阅读 · 0 评论