Vue脚手架组件开发常见问题

最新推荐文章于 2024-12-11 11:16:01 发布

里昂(Leon)

最新推荐文章于 2024-12-11 11:16:01 发布

阅读量556

点赞数 1

分类专栏：前端技术文章标签： vue 组件 html vue.js 前端

赵鑫阳

本文链接：https://blog.youkuaiyun.com/weixin_45948874/article/details/113963652

版权

前端技术专栏收录该内容

8 篇文章

订阅专栏

本文总结了Vue前端开发中遇到的问题，包括路由跳转、接口访问、axios配置、子路由配置、表单操作、数据绑定、元素显示、事件处理等，并提供了详细的解决方案。例如，axios的基础URL配置确保与后台接口一致，子路由配置采用嵌套方式，表单重置使用`resetFields()`方法，以及如何处理未登录状态等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue纯前端的跳转

this.$router.push("/main")

2. 访问第二个接口时出现未登录

main.js中的服务器路径配置错误，此时的服务器路径应该和后台数据接口访问路径完全一致127.0.0.1和localhost不一样

axios.defaults.baseURL=“http://localhost:8080/”

																										**main.js**

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import axios from 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
/*为axios配置全局参数*/
//服务器路径
axios.defaults.baseURL="http://localhost:8080/"
//跨域带cookie
axios.defaults.withCredentials = true
//响应拦截器 统一处理响应数据
axios.interceptors.response.use(function (resp) {
    if(resp.data.returnCode==20000){
        //如果服务器响应码是20000的话 通过路由跳转到登录组件
        console.log("拦截器输出： 没有登录")
        router.push("/login");
    }
    return resp;
}, function (error) {
    return Promise.reject(error);
});

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3.子路由配置写法

  {path:'/main',component:Main,children:[
				{path:'/menus',component:Menu},
				{path:'/users',component:User}
  ]}

4.导航的router开关

是否使用vue-router的模式，启用该模式会在激活导航时以index作为path进行路由跳转（index需要进行绑定）

在el-menu下开启router(直接写rounter就行)

5.type check failed for prop "index"错误提示解决

:index="menu.menuid.toString()"

当开启路由模式的时候index进行绑需要的是url是字符的格式的路径而以及菜单的index还是数字格式的所以把一级菜单的index转换成字符串格式就可以了

6.当在表格中想展示图标或者按钮时使用数据插槽（注意绑定）

slot-scope/v-slot=“自定义key”

scope.row 当前行数据

scope.row.glyphicon 数据的key

<template slot-scope="scope">
    <i :class="scope.row.glyphicon"></i>
    <span style="margin-left: 10px">{{ scope.row.glyphicon }}</span>
</template>

7.使用重置按钮不好使问题

当绑定事件后点击没有重置效果

原因是没有在el-form-item标签上添加相应的prop属性。添加该属性重置按钮才好用

this.$refs["queryform"].resetFields();

8.dialog弹出框的显示问题

label文字和输入框不一行，在el-form 标签设置 label-width = "80px"这段代码是用设置了表单中所有label的宽度

选择框宽度更改.el-select{width: 100%;}

9.添加的按钮问题

当点击添加的时候触发一个事件，设置弹出框的显示状态为true清除上一个添加的弹出框页面信息。

当点击添加弹出框确定按钮时设置弹出框显示为false发送请求然后刷新页面数据

10.表单重置流程

1.添加重置按钮绑定事件

2.添加事件并写重置函数this.$refs["queryForm"].resetFields();

3.在要重置的表单el-form 标签内写ref="queryForm"此ref和重置函数绑定用于找到表单

4.在表单内的el-form-item标签内写prop=“字段绑定值”

11.Error in v-on handler: "TypeError: Cannot read property ‘resetFields’ of undefined"问题解释

当使用element-ui的el-dialog组件时候，因为element的内置优化原因（就是页面加载的时候不加载隐藏的组件到vue对象内，为了节省内存）。当进入页面点击添加按钮时调用了不存在ref所以报错

解决办法使用$nextTick(更改addForm的渲染时机后移)

				this.$nextTick(function(){
					this.$refs["addForm"].resetFields();
				})

12.表单选择一行数据

在el-table中添加highlight-current-row @current-change="handleCurrentChange"代码

（视觉效果的高亮和选中一行的方法）

数据绑定层中添加currentRow: null

事件添加(此时的val就是选中行的对象)

curRowChange(val){
    this.currentRow = val;
    //将选中行的对象赋值给currentRow
    console.log(this.currentRow);
},

13.修改弹出框的下拉菜单父菜单选项错误

原因是页面展示的是要数字类型而父菜单的最高项是自定义0需要进行双向绑定该为数字类型

<el-option label="无" :value="0"></el-option> 或者<el-option label="无" value=0></el-option>

12.更改页面数据时主页面数据一起同时改变

当element-ui使用本页面的数据进行修改的时候，不用后台传过来的数据，此时修改弹出框的数据是和展示页面的数据进行双向绑定的此时修改弹出框数据展示页面数据会一起改变，如果想改变这种情况需要复制一份该数据给修改的弹出框使用断开绑定

this.editform = JSON.parse(JSON.stringify(this.currentRow));

13.设置不选中行的时候修改和删除禁用

1.绑定修改和删除 :disabled="btnDisabled"

2.在数据交互层定义btnDisabled: true使得刚进页面删除和修改按钮状态就为禁用

3.在选中行事件内开启按钮状态this.btnDisabled = false;

4.当修改或者删除和添加后页面数据刷新同样需要关闭按钮所以在查询事件中关闭按钮this.btnDisabled = true;

5.当页面效果感觉是渲染状态不对的时候使用nextTick也不好用就使用watch

watch:{
			/**
			 * 监控指定的数据刷新
			 */
			tableData:function(){
				/**
				 * 把按钮更新渲染后移
				 */
				this.$nextTick(function(){
					this.btnDisabled = true;
				})
				
			}
		}

14.vue表格的时间组件使用

1.在export default上一行导入 import moment from 'moment'

2.在table显示时间的一行的el-table-column标签内加上 :formatter="dateFormat"

3.在方法中添加如下代码日期就正常显示了

			dateFormat(row, column) {
				var date = row[column.property];
				if (date === undefined) {
					return ''
				};
				return moment(date).format("YYYY-MM-DD HH:mm:ss")
			}

15.新增或者删除和更改数据后的刷新的代码

必须写在查询发送请求的代码块里

16.二级路由配置问题

const routes = [
	{path:'/newpage',component:NewPage},
	{path:'/login',component:Login},
	{path:'/main',component:Main,children:[
		{path:'/sys/menus',component:Menu},
		{path:'/sys/users',component:User},
		{path:'/channel/list',component:List},
		{path:'/channel/typelist',component:Typelist}
	]},
]

17.下拉菜单是布尔值的时候

//删除修改
<el-form-item label="是否可用" prop="isValid">
    <el-select v-model="addform.isValid" placeholder="请选择">
        <el-option label="可用" :value="1">
        </el-option>
        <el-option label="不可用" :value="2">
        </el-option>
    </el-select>
</el-form-item>
//展示
<el-table-column property="isValid" label="是否可用" width="100">
				<template slot-scope="scope">
					<el-tag :type="scope.row.isValid == '1' ? 'primary' : 'danger'" disable-transitions>{{scope.row.isValid==1?'可用':'不能用'}}</el-tag>
				</template>
			</el-table-column>

18.绕过报错

				if(!(this.$refs["addForm"] == undefined)){
					this.$refs["addForm"].resetFields();
				}

19.echarts相关

let echarts = require('echarts')
let myChart = echarts.init(document.getElementById('myChart'))