前端 - 简忆博客

vue自定义格式化时间全局过滤器，实现格式化时间戳

2020-11-27 前端

我们在做vue前端项目的时候，如果后端给到的数据是时间戳的形式，我们要把它改成正常时间格式，可以通过以下方法效果：在main.js下加入以下全局函数//;自定义时间函数 Vue.filter('dateFormat',function(originVal){ ;;const;dt;=;new;Date(originVal) ;;const;y;=;dt.getFullYear() ;;const;m;=;(dt.getMonth()+;'').padStart(2,;'0') ;;const;d;=;(dt.getDate();+;'').padStart(2,;'0') ;;const;hh;=;(dt.getHours();+;'').padStart(2,;'0') ;;const;mm;=;(dt.getMinut

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

2020-11-26 前端

4845 0

有时我们需要使用折叠树形表格，比如以下形式这个功能主要用到这个插件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 前端

5241 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 前端

4501 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:

网站如何创建百度地图显示地理位置

2020-11-20 前端

3891 0

在做企业网站的时候，我们会放置一个地理位置，我们可以引用百度地图，来显示我们的店铺所在位置效果演示：操作步骤1、打开百度地图https://map.baidu.com/，搜索输入地址2、点击地址3、会出现如下视图4、点击分享5、复制我们想要的地址6、复制https://j.map.baidu.com/b8/S ，粘贴到我们的iframe框架代码中7、完整demo代码<!DOCTYPE;html> <html> <head> ;;;<meta;charset="UTF-8"> ;;;<title>地图演示</title> </head> <meta;content="width=device-width,initial-s

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

2020-11-19 前端

5122 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 前端

3218 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 前端

3715 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 前端

4386 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 前端

3516 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 前端

3767 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"

解决laravel8无法安装验证码问题,更新composer.lock 文件

2020-11-07 前端

3775 0

在使用laravel8框架时，报如下错误https://mirrors.aliyun.com/composer could not be fully loaded (The "https://mirrors.aliyun.com/composer/packages.json" file could not be downloaded (HTTP/2 429 )), package information was loaded from the local cache and may be out of date;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;[Composer\Downloader\TransportException];;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;The "

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

2020-11-05 前端

2877 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 前端

2751 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 前端

3302 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.$

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

2020-11-02 前端

3522 0

最近在搭建vue后台的时候，出现跨域问题。框架使用的是laravel8，前端在使用axios请求接口出现跨域问题，最终解决方法输入下1、安装扩展composer;require;barryvdh/laravel-cors2、使用方法在/app/Http/Kernel.php $middleware下添加如下代码\Fruitcake\Cors\HandleCors::class,在/app/Http/Kernel.php $routeMiddleware下添加如下代码'cors';=>;\Barryvdh\Cors\Middleware\HandleCors::class,

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

2020-10-31 前端

3175 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 前端

4333 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 前端

2516 0

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

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

2020-10-29 前端

3843 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 前端

3171 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自定义格式化时间全局过滤器，实现格式化时间戳

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

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

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

网站如何创建百度地图显示地理位置

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

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

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

vue elementUI如何使用Dialog 对话框

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

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

解决laravel8无法安装验证码问题,更新composer.lock 文件

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

vue中如何使用element弹窗

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

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

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

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

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

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

如何在vue中引入element-ui

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

vue自定义格式化时间全局过滤器，实现格式化时间戳

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

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

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

网站如何创建百度地图显示地理位置

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

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

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

vue elementUI如何使用Dialog 对话框

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

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

解决laravel8无法安装验证码问题,更新composer.lock 文件

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

vue中如何使用element弹窗

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

Laravel解决前后端分离应用跨域请求，安装CORS 扩展包

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

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

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

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

如何在vue中引入element-ui

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录