Vue,JavaScript框架,前端开发框架,Vue问题集合

vue-element如何使用vue-table-with-tree-grid树形表格

2020-11-26

有时我们需要使用折叠树形表格，比如以下形式这个功能主要用到这个插件vue-table-with-tree-grid1、插件下载地址：https://github.com/MisterTaki/vue-table-with-tree-grid安装：npm方式:npm;i;vue-table-with-tree-grid;-S或者yarn方式 :yarn;add;vue-table-with-tree-grid2、引入方式：安装好之后，在main.js下引入import;TreesTable;from;'vue-table-with-tree-grid' Vue.component('tree-table',;TreesTable)3、使用方法 ;;;;;;;;<el-card> ;;;;;;;;;;<tree-table;:data="a

vue-elementUI获取树形控件的值方法

2020-11-25

3007 0

在vue中使用elementUI的;el-tree树形结构控件，如何获取值呢？以下是vue-elementUI获取树形控件的值<template> <div> <el-tree;:data="treesList";:props="treesProps";show-checkbox;node-key="id" ;;;;;;;;;;;;;default-expand-all;:default-checked-keys="defKeys";ref="tressRef"> </el-tree> </div> </template>获取值const;key;=;[ ;;;;;;;;;;;;;;;;...this.$refs.tressRef.getCheckedKeys(), ;;;;;;;;;;;;;;;;...this.$refs.tress

vue elementUI Tree 树形控件的使用方法

2020-11-21

2337 0

用清晰的层级结构展示信息，可展开或折叠。效果演示trees.vue代码<template> ;;;<div> ;;;;;;;;;;;;; ;;;;;;;;;;;;<el-tree;:data="treesList";:props="treesProps";show-checkbox;node-key="id" ;;;;;;;;;;;;;default-expand-all;;:default-checked-keys="defKeys"></el-tree> </div> </template>Js代码<script> export;default;{ ;;;;data(){ ;;;;;;;;return{ ;;;;;;;;;;;;//;树形数据源 ;;;;;;;;;;;;treesList:

vue判断token是否过期，过期后刷新token

2020-11-19

3196 0

前后端分离，vue中以token来判断是否登录，但是token过期如何判断呢？我们可以通过挂载路由导航守卫和响应拦截器来判断在main.js加入如下代码/* 响应拦截器 */ axios.interceptors.response.use(function (response) { // ①10010 token过期（30天） ②10011 token无效 ;if (response.data.code === 1003) { ;;;window.localStorage.removeItem('token'); ;;;router.replace({ ;;;;;path: '/login' // 到登录页重新获取token ;;;}) ;}else if (response.data.token) { // 判断token是否存在，如果存在说明需要更新token ;;;window.localStor

vue-elementUI表格通过作用域插槽自定义输出格式

2020-11-16

1629 0

效果：我们在使用elementUI表格的时候，我们有时候要使用其他格式，比如按钮等，我们可以通过作用域插槽自定义输出格式代码实现<el-table-column;label="权限等级";prop="level"> ;;<template;slot-scope="scope"> ;;;;;;;<el-tag;v-if="scope.row.level=='0'">一级</el-tag> ;;;;;;;<el-tag;v-if="scope.row.level=='1'";type="success">二级</el-tag> ;;;;;;;<el-tag;v-if="scope.row.level=='2'

Laravel+vue-elementUI表格分页使用例子

2020-11-14

1713 0

本文结合laravel和vue-element实现前端后端分页，包含增删改查搜索的实现，实现表单数据验证，非空判断。效果展示1、编写后端laravel8接口代码，获取搜索条件，获取显示条数，获取当前页数<?php ; namespace;App\Http\Controllers\Admin; ; use;App\Http\Common\Err\ApiErrDesc; use;App\Http\Controllers\Controller; use;App\Http\Requests\Admin\CheckUser; use;App\Http\Response\ResponseJson; use;App\Models\Admin\User; use;Illuminate\Http\Request; ; class;UserController;extends;Controller { ;;;;use;Respo

vue elementUI如何使用Dialog 对话框

2020-11-12

2477 0

什么是Dialog 对话框？在保留当前页面状态的情况下，告知用户并承载相关操作。Dialog 弹出一个对话框，适合需要定制性更大的场景。使用：需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。例子：<el-button;type="primary";@click="addDialogVisible;=;true">添加用户</el-button> ;;;;;;;; ;;;;;

vue elementUI如何自定义表单验证规则

2020-11-10

1874 0

一、elementUI自带了一部分表单验证规则，本文讲解如何使用自定义验证规则来完成密码的二次验证。1.1、首先添加验证邮箱和电话规则和正则表达式//;验证邮箱的规则 ;;;;;;;;var;checkEmail;=;(rule,;value,;cb);=>;{ ;;;;;;;;;;;;//;邮箱正则表达式 ;;;;;;;;;;;;const;regEmail;=;;/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;;;;;;;;;;;;if(regEmail.test(value)){ ;;;;;;;;;;;;;;;;return;cb() ;;;;;;;;;;;;} ;;;;;;;;;;;;cb(new;Error('请输入合法的邮箱')) ;;;;;;;;} ; ;;;;;;;;;//;验证手机号的规

Vue+elementUI如何实现左侧菜单高亮

2020-11-09

1543 0

效果展示1、首先给el-menu组件加上:default-active="activePath"属性，再给子集菜单加上@click="saveNavState(subItem.path)"点击事件。;;; ;;;;;;<el-aside;:width="isCollapse;?;'64px';:;'200px'"> ;;;;;;;;<div;@click="toggleCollapse">|||</div> ;;;;;;;;<el-menu;background-color="#333744";text-color="#fff";active-text-color="#4091ff";unique-opened;:collapse="isCollapse"

Vue使用elementUI通过路由导航守卫控制页面权限

2020-11-05

1456 0

路由导航守卫控制访问权限如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面// 挂载路由导航守卫 router.beforeEach((to,from,next)=>{ ;//to 将要放行的路径 ;//from 代表从哪个路径跳转而来 ;//next 是一个函数，表示放行 ;//next() 放行;;next('/login') 强制跳转 ;if(to.path=== '/login'){return next()} ;//获取token ;const tokenStr = window.localStorage.getItem('token'); ;if(!tokenStr){ ;;return next('/login') ;}else{ ;;next() ;} })

vue中如何使用element弹窗

2020-11-04

1404 0

1、在element.js中导入弹窗//;导入弹窗 import;{;Message;};from;'element-ui' Vue.prototype.$message;=;Message2、使用方法return;this.$message.error(‘失败’) return;this.$message.sucess(‘成功’) return;this.$message.;warning;(‘警告’)

Vue配置axios发起登录请求，接口数据方法例子

2020-11-03

1399 0

Vue中如何发起请求接口数据方法例子在main.js添加如下代码import;axios;from;'axios' //;配置请求的更路径 axios.defaults.baseURL;=;"http://www.laravel8.com/api/" Vue.prototype.$http;=;axios 使用方法<script> export;default;{ ;;;;data(){ ;;;;;;;;return{ ;;;;;;;;;;;;//;登录表单数据绑定对象 ;;;;;;;;;;;;loginForm:{ ;;;;;;;;;;;;;;;;username:'', ;;;;;;;;;;;;;;;;password:'' ;;;;;;;;;;;;}, ;;;;;;;;} ;;;;}, ;;;;methods:{ ;;;;;;;;login(){ ;;;;;;;;;;;;this.$

Vue elementUI使用阿里iconfont图标库，vue如何引用iconfont图标

2020-10-31

1586 0

有时我们在开发项目的时候，前端自带框架图标库不够用怎么办？我们可以引入第三方图标库，以下是引入图标库的方法。1、将下载的font图标库放置\src\assets\目录下2、在main.js中引入//;导入字体图标 import;'./assets/font/iconfont.css'3、使用字体图标<el-input;prefix-icon="iconfont;password";type="password";placeholder="请输入密码";v-model="loginForm.password"></el-input>

Vue使用elementUI如何实现点击按钮重置表单，vue如何重置表单

2020-10-30

2272 0

resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果1、如何拿到表单实例对象了？我们可以给el-form表单添加ref=””名称可以随意取2、点击按钮重置表当，为重置按钮绑定单击事件@click="resetLoginForm"3、this.$refs.loginFormRef.resetFields();对表单数据重置4、具体代码实例，仅供参考<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<el-form;label-width="0px";ref="loginFormRef"> ;;;;;;;;;;;;;;<!--;用户

Vue使用elementUI如何实现表单数据验证

2020-10-29

1190 0

什么是表单验证？在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。步骤说明：共三个步骤。第一步，为el-form通过属性绑定:rules=””，绑定一个校验规则对象，第二步，在校验规则对象之中定义几个校验规则的属性，第三步，在我们的表单对象中通过prop指定不同校验对象详细代码<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<div> ;

Vue使用elementUI如何实现表单数据绑定

2020-10-29

1920 0

Vue使用element表单在做项目中,我们经常要用到的，以下是如何进行数据绑定教程。1、给el-form添加属性绑定:model=””,然后给每个表单el-input通过v-model=""绑定到数据对象的属性中。<template> ;;<div> ;;;;;;<div> ;;;;;;;;;; ;;;;;;;;;;<el-form;label-width="0px";:model="loginForm"> ;;;;;;;;;;;;;; ;;;;;;;;;;;;<el-form-item;label=""> ;;;;;;;;;;;;;;;;<el-input;prefix-icon="el-icon-u

如何在vue中引入element-ui

2020-10-28

1304 0

1、npm 安装npm;i;element-ui;–S2、在main.js中引入import;ElementUI;from;'element-ui' import;'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)完整代码import;Vue;from;'vue' import;App;from;'./App.vue' import;router;from;'./router' import;ElementUI;from;'element-ui' import;'element-ui/lib/theme-chalk/index.css' import;'./plugins/element.js' ; //;导入全局样式表 import;'./assets/css/global.css' ; Vue.config.prod

vue cli如何关闭eslint严格语法检查

2020-10-27

2244 0

eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。有了eslint的校验，可以来规范开发人员的代码，是挺好的。但是有些像缩进、空格、空白行之类的规范，在开发过程中一直报错，未免太过于苛刻了。如何关闭eslint？1、我们在创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，我们选择no就好了。2、Vue ui界面的，找到配置，把eslint configuration中的保存时检查关闭即可，并重启项目3、若是创建项目不消息建了yes，我们不需要删除项目重新创建，我们只要修改build\webpack.bas

$解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题$

解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题

2020-10-26

16740 0

Failed to compile../src/views/Login.vueModule not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'原因：当前找不到less-loader，默认vue-cli工具帮我们创建了项目，并没有帮我们安装less-loader，我们只需安装less-loader和less即可。安装好之后，我们发现并不能生效，我们只需重新启动即可

解决vue 报错 error Newline required at end of file but not found eol-last问题

2020-10-25

3785 0

./src/App.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\Hm\Desktop\vue\vue_shop\src\App.vue; 16:9; error; Newline required at end of file but not found; eol-last✖ 1 problem (1 error, 0 warnings); 1 error and 0 warnings potentially fixable with the `--fix` option.出现这个问题，是因为vue文件中最后一行没有空一行，我们只需按下回车键空一行即可。

Vue新增路由报错Module Error (from ./node_modules/eslint-loader/index.js):

2020-10-24

5020 0

Failed to compile../src/router/index.jsModule Error (from ./node_modules/eslint-loader/index.js):C:\Users\Hm\Desktop\vue\vue_shop\src\router\index.js; 18:4; error; Unexpected trailing comma; comma-dangle✖;1 problem (1 error, 0 warnings); 1 error and 0 warnings potentially fixable with the `--fix` option.出现这个问题是因为vue路由不能加,（逗号）解决方法是，把数组最后一个逗号去掉。