Vuejs+ElementUI项目开发中遇到的坑(一)
2020/4/28 11:33:37
本文主要是介绍Vuejs+ElementUI项目开发中遇到的坑(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1 router路由跳转问题
错误现象:vue-router跳转到子路由页面时,一直报错路由找不到或者直接跳到404页面。
需求场景:需要从父级路由跳转到子级隐藏的路由中,左侧侧边栏只显示第一个子路由对应的菜单项,第二个子路由通过第一个子路由跳转过去。
如下是路由配置代码
{ path: '/manager/co', components: Common, redirect:'/manager/co', name:'co', meta: { title:'co模块', icon:'icon-fc', authority:'co' }, children: [ { path:'manager/list', components:()=> import('@/views/manager/co/index'), meta: { title:'co模块', rootName: 'ppm', }, name: 'list' },{ path:'manager/info', components:()=> import('@/views/manager/info/index'), meta: { title:'inf模块', rootName: 'ppm', }, name: 'info' } ] }复制代码
上述路由配置文件与规则还是要结合vue-router的规则和动态渲染路由的递归方法有关系。
2 路由刷新参数问题
错误现象:router路由跳转后从url中获取参数,且刷新页面后参数不丢失。
需求场景:需要从父组件跳转到子组件页面后再次刷新页面,请求接口的参数从url中获取。
如下是代码
this.$router.push({ name:'fxDeatail', params: { id: row.id, checkId: row.checkId} })复制代码
router/index.js
多参数拼接到url中
{ path:'fxDetail/:id/:checkId', Component:() => import('@/views/manager/detail/fxDetail/index'), name: 'fxDetail', hidden: true, meta: { title: 'fx详情', authority: 'fxDetail', rootName: 'ffx' } } 复制代码
name和params搭配
this.$router.push({name:"",params:{id:""}}) 复制代码
path和query搭配,参数成了url中的一部分
this.$router.push({path:"",query:{id:""}}) 复制代码
3 vuedraggable表格行拖动问题
错误现象:vuedraggable
实现表格行拖动后未能执行相应的回调方法导致数据不能正确赋值。
需求场景:实现表格行拖动后将表格中第一列的数据(第一列数据的类型是number)从小到大排序。初始化时表格第一个列的数据就是1,2,3,...。拖动后依旧保持不变,后续列就是拖动后的数据。
如下是代码:
<draggable v-model="columnData" tooltip-effect="light" stripe border :move="onMove" @end="onEnd"> <transition-group> <li v-for="(item,index) in columnData" :key="item.props"> <span>序号</span> <el-input v-model="item.symbol" placeholder="请输入符号"></el-input> <el-button type="success" @click="addRow">+</el-button> <el-button type="danger" @click="delRow">-</el-button> </li> </transition-group> </draggable>复制代码
添加与删除方法
delRow(index) { if(this.columnData.length>1){ this.columnData.splice(index,1) } }, addRow(){ let index = this.columnData.length; this.columnData.splice(index+1,0,{symbol:index*10+10,props:index+1}) }复制代码
拖动时与拖动后回调方法
onMove({relatedContext,draggedContext}){ let relatedElement = relatedContext.element; // 移动前的下标 this.getOldIndex = this.columnData.map(item=>item.props).indexOf(relatedElement.props) let draggedElement = draggedContext.element; // 移动后的下标 this.getNewIndex = this.columnData.map(item=>item.props).indexOf(draggedElement.props) return relatedElement && draggedElement } onEnd() { if(this.getOldIndex<this.getNewIndex){ for(let i=this.getOldIndex+1;i<this.getNewIndex+1;i++){ this.columnData[i].Symbol+=10 } }else{ for(let i=this.getNewIndex;i<this.getOldIndex;i++){ this.columnData[i].Symbol-=10 } } this.columnData[this.getOldIndex].Symbol = this.getOldIndex*10+10 }复制代码
之前一直不能成功调用onEnd方法注意此处的写法规范。
4 input实现远程搜索问题
需求场景:在input输入框中实现远程搜索(此处请求后台接口获取下拉框的数据)从匹配到的下拉框中选择。
如下是两种实现方式代码:
4.1 使用el-autocomplete
<el-autocomplete v-model="value" :fetch-suggestions="querySearchAsync" @blur="searchText" @select="handleSelect"></el-autocomplete> props: { data: { type: Function, default:() => {} } } methods: { async querySearchAsync(queryString, cb) { const result = await this.data(queryString) cb(result) }, handleSelect(item) { this.$emit('change',item) }, searchText(el) { this.$emit('inputValue', el.target.value) } } 复制代码
4.2 使用el-select
<el-select v-model="product" filterable remote reserve-keyword :no-data-text="noDataText" :remote-method="remoteMethod" :loading="loading" clear @change="handleChange(product,index)"> <el-option v-for="(item,index) in remoteList" :key="index" :label="item.name" :value="item.id"/> </el-select> data() { return { noDataText:'无匹配信息', loading:false, remoteList: [], product: '' }; }, methods: { handleChange(val) { this.product = val }, remoteMethod(query){ // 请求接口部分 this.loading=true; setTimeout(() => { this.loading = false; this.remoteList = res.data; // res为接口返回的数据 },200) }, }复制代码
总结
以上总结可能就是近期项目中遇到的一些坑,予以总结。分享给大家,部分内容并非原创,还是要感谢前辈的总结,如果本文影响到您的利益,那么还请告知,在写本文时的初衷就是想给更多学习前端的小伙伴拓展知识,夯实基础,共同进步,也为了以后方便复习。
这篇关于Vuejs+ElementUI项目开发中遇到的坑(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南