摘要：
首先，在 element.js 中导入弹框提示组件，但是它的配置与其它组件不一样，它需要进行全局挂载。 全局导入后，我们就可以在我们的登录组件 login.vue 中通过 this来访问弹框提示组件了。 测试一下，输入 admin 和 123456，此时就会提示输入成功。 阅读全文
摘要：
主要函数如下： 在我们的 tabs 标签页添加一个 before-leave 函数 然后在 methods 中定义，根据第一个标签页的逻辑来阻止标签页的切换。 阅读全文
摘要：
以下就是步骤条使用的核心代码，其中 active 绑定的是每一个 step 的下标，默认从 0 开始。其次，我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。 Javascript <!-- 步骤条区域 --> <el-steps :space 阅读全文
摘要：
实现效果如下： 通过 v-if 的 boolean值来动态变化是否显示文本框还是 button 按钮。通过 v-model 双向绑定来实现文本框内容的监听。 由于每一行需要设置文本框的显示与隐藏，而且数据是共享的。我们需要通过 scope来获取每一行的值来进行绑定，不然的话，就会导致某个文本框显示了 阅读全文
摘要：
首先，给我们对话框的确定按钮绑定一个事件。 主要使用 tree 组件提供的两个方法 getCheckedKeys 和 getHalfCheckedKeys来分别返回目前被选中的节点的 key 所组成的数组和目前半选中的节点的 key 所组成的数组 阅读全文
摘要：
对于分配权限一栏，我们需要如下效果： 相关配置属性： 其中 data 为我们的数据源，props 为我们在 tree组件显示的文本内容。通过设置 node-key可以让每个树节点作为唯一标识的属性，整棵树是唯一的；通过设置 default-expand-all 来默认展开我们的所有节点，不需要每次都 阅读全文
摘要：
只需要将 el-table-column 中 type 属性设为 expand 即能将表格进行展开。 实现效果如下： 阅读全文
摘要：
这样会导致我们的菜单栏右边会有一个若隐若现的线条凸起 解决办法如下，直接将 el-menu 的border-right 设置为 none 即可。 阅读全文
摘要：
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。 在之前的操作中，我们登录之后会种植一个 token 值，表示我们登录成功了，那么此时我们将 token 值去掉呢？ 直接点击上述 clear all 按钮去掉之后，我们依旧是可以访问 /home的路由，没有登录也能访问我们的 阅读全文
摘要：
在 main.js 文件内进行配置 那么，此时我们就可以通过 this访问登录组件原型上 $http 方法，来发起对后端的请求了。 阅读全文
摘要：
将登录成功之后的 token，保存到客户端的 sessionStorage 中 项目中除了登录之外的其它 api 接口，必须在登录之后才能访问 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中 通过编程式导航跳转到后台主页，路由地址是 /home 阅读全文
摘要：
在element.js 文件中，按照如下方式，进行按需导入即可。然后通过 Vue.use()方法进行引用。（优化点：也就是将组建导入都放在一起，如果组件过多的话，支持换行） 阅读全文
摘要：
在 router配置页中使用 redirect 属性 阅读全文
摘要：
直接在 main.js将相关样式导入即可 Code // 导入全局样式表 import './assets/css/global.css' 阅读全文
摘要：
可视化地呈现时间流信息。 由于 vue-cli-plugin-element 最后更新时间是 2019年1月，而 element-ui 中 Timeline 时间线更新是在 3月份，因此我们没有办法直接进行引用。因此，我们直接通过手动导入的方式。 然后，我们打开 element.js，进行导入 Js 阅读全文
摘要：
图片预览窗可以用 el-dialog 组件来做，然后通过 on-preview 函数来处理图片预览的操作。 Js <!-- 图片预览 --> <el-dialog title="图片预览" :visible.sync="previewVisable" width="50%"> <img :src=" 阅读全文
摘要：
Js // 处理图片移除的操作 handleRemove(file) { // 1.获取将要删除的图片的临时路径 const filePath = file.response.data.tmp_path // 2.从pics数组中，找到这个图片对应的索引值 const idx = this.addF 阅读全文
摘要：
阅读全文
摘要：
Js <!-- action表示图片上传后台api地址 --> <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" > <el-button 阅读全文