Vue相关
记录vue基础知识和项目
Ac 小萌新
这个作者很懒,什么都没留下…
展开
-
数据统计页面
<template> <div> <!--面包屑导航区--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>数据统计</el-breadcr原创 2021-02-16 19:52:20 · 395 阅读 · 0 评论 -
vue 商品列表页面自定义格式时间
main.js中自定义全局组件Vue.filter('dateFormat', function (originValue) { const dt = new Date(originValue) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHo原创 2021-02-13 19:02:50 · 197 阅读 · 0 评论 -
分类参数
1.参数页面渲染<!--展开行--> <el-table-column type="expand"> <template slot-scope="scope"> <el-tag closable v-for="(item, i) in scope.row.attr_vals" :key="i">{{item}}</el-tag> <原创 2021-02-09 14:22:03 · 375 阅读 · 0 评论 -
vue---级联选择器菜单无法全部显示问题
在全局的样式文件中加入全局高度即可.el-popper .el-cascader-panel{max-height: 500px!important;}原创 2021-02-07 16:37:57 · 625 阅读 · 0 评论 -
权限列表页面实现
1.components新建power文件夹新建文件Rights.vue并添加路由import Rights from ‘…/…/src/components/power/Rights.vue’2.获取权限列表<script>export default { data () { return { // 权限列表 rightsList: [] } }, created () { // 获取所有的权限 this.getR原创 2021-02-03 16:25:13 · 180 阅读 · 0 评论 -
主页功能实现及美化
1.主页布局及美化https://element.eleme.cn/#/zh-CN/component/container1.1官方文档找到合适的主页布局进行复制粘贴到Home.vue图片需自己添加到assets目录中<template> <el-container class="home-container"> <!--头部区域 --> <el-header > <div> &l原创 2021-02-01 17:50:13 · 555 阅读 · 0 评论 -
登录界面完成将本地代码提交到码云
前提:有git(博客资源里有,可免费快速下载)1.终端进入本地目录运行git -status查看项目权重红色为修改过的文件2.运行git add .3.运行git commit -m “内容”4.查看分支并切换主分支,准备合并(checkout切换分支)git branch—git checkout master5.合并分支git merge login6.git push上传码云此时进码云会发现只有master主分支以下操作把本地新创建的login分支上传7.git原创 2021-01-31 23:41:39 · 119 阅读 · 0 评论 -
解决eslintrc带来的各种报错即退出功能实现
全局创建.prettierrc文件注:一定要全局,即放在根目录内容可以自己另外添加{“swmi”:false,“singleQuote”: true}然后使用快捷键格式化就不会产生冲突退出功能实现Home.js页面<template> <div> <el-button @click="loginout" type="info">退出</el-button> </div></template>&l原创 2021-01-31 23:04:01 · 140 阅读 · 0 评论 -
登录退出-功能并进行页面跳转
1.登录表单的form增加:mode属性, 绑定:rules="loginFormRules"规则2.在script中添加校验规则3.在item项中通过prop指定不同的校验规则参考官方文档:https://element.eleme.cn/#/zh-CN/component/form表格表单—表单验证<!-- 登录表单区域 --><!-- 需要用到什么组件必须在plugins下的element.js中定义 --> <el-form ref=原创 2021-01-31 19:19:08 · 855 阅读 · 0 评论 -
vue入门之vue ui及所需插件
首先需安装node然后安装npm或cnpm(方便安装其它脚手架)vue 3.0以上版本才具有可视化界面(终端输入vue ui 页面才会自动跳转 )如果已经安装过旧版本,需删除npm uninstall vue-cli -g安装脚手架@vue/cli(Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli)cnpm install -g @vue/cli //yarn global add @vue/cli终端输入vue ui进入可视化页面点击界面右上角的进入然后搜索框原创 2021-01-30 21:10:08 · 146 阅读 · 0 评论