Ямы, возникшие при разработке проекта Vuejs+ElementUI (1)

1 проблема перехода маршрутизации маршрутизатора

Явление ошибки: когда 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 Проблема с параметром обновления маршрута

Явление ошибки: маршрутизатор получает параметры из 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'
		}
}

сочетание имени и параметров

this.$router.push({name:"",params:{id:""}}) 

Путь сопоставляется с запросом, а параметры становятся частью URL.

this.$router.push({path:"",query:{id:""}}) 

3 vuedraggable проблема перетаскивания строки таблицы

Феномен ошибки:vuedraggableНевыполнение соответствующего метода обратного вызова после перетаскивания строки таблицы приводит к неправильному присвоению данных.

Сценарий запроса: после перетаскивания строки таблицы данные в первом столбце таблицы (тип данных в первом столбце — число) сортируются от меньшего к большему. При инициализации данные в первом столбце таблицы равны 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 входа реализуют проблему удаленного поиска

Сценарий требования: Реализуйте удаленный поиск в поле ввода ввода (запросите фоновый интерфейс для получения данных из раскрывающегося списка) и выберите из соответствующего раскрывающегося списка.

Ниже приведен код для двух реализаций:

4.1 Использование автозаполнения

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