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)
	  },
}