vue
文章平均质量分 66
无语听梧桐
我姓同,所以叫无语听梧桐~
一名前端小白,不是计算机科班出身,偶然机会接触到前端编程,略感兴趣,就选择这条路。不知道在这条路上可以走多远,不过既然选择了,我会尽量选择多走一点!
展开
-
vue中很实用的知识点
动态路由复用组件对于复用组件(只是路由参数发生改变),生命周期函数钩子不会被调用解决:监听路由变化 watch: { '$route'(to, from) { // 对路由变化作出响应 } }vue-router 的钩子方法beforeRouteUpdate(ro, from, next) { // 在当前路由改变, 但是该组件被复用时调用 // 举例: 对于带有动态参数的路径 /foo/:id,在/foo/原创 2021-01-28 14:25:59 · 267 阅读 · 0 评论 -
element-ui el-table 多列排序
element-ui el-table 多列排序需求:el-table 需要支持多列排序,后端排序。即就是在点击后重新发送请求,点击一列的排序,另一列的排序样式能够保留问题: element table 排序默认是单列排序最终实现效果:思路:header-click 事件 结合 header-cell-class-name在点击表头的时候排序的列以及是升降序保存到一个数组对象里, 然后通过header-cell-class-name属性设置选中的样式<el-table :d原创 2020-11-02 10:24:02 · 12280 阅读 · 9 评论 -
vue+axios 以文件流的形式下载文件
vue+axios 以文件流的形式下载文件需求:点击导出按钮,发送 POST 请求,接口返回文件流,前端下载 Excel 文件后端在响应头上返回文件名注意的点:前端调用接口, 需要把 axios 的 responseType 改为arraybuffer或者blob, 不然下载的文件打不开;如果文件名中有中文,需要进行 URL 解码,使用*decodeURI()*方法通过 a 标签实现下载文件接口返回的响应头: axios({ method: 'post',原创 2020-09-07 16:55:34 · 2469 阅读 · 0 评论 -
vue 中使用 eventBus兄弟组件传数据
vue 中使用 eventBus场景:需要兄弟组件传数据建立 eventBusimport Vue from 'vue'export default new Vue()在需要往外传值和接受值的兄弟组件中使用 eventBusimport Bus from '@/utils/eventBus'往外传值的组件eventBus.$emit('getParams',data)接收数据的组件处理created(){ eventBus.$on('getParams'原创 2020-07-17 16:53:56 · 571 阅读 · 2 评论 -
axios请求
axios 传递数据get 请求中传递数据import qs from 'qs'http.get = function (url: string, params: any) { return axios.get(url, { params: params, paramsSerializer: (params) => { return qs.stringify(params, { indices: false }) }原创 2020-06-12 16:07:31 · 509 阅读 · 0 评论 -
element-ui Upload 上传文件
element-ui Upload 上传文件需求描述:如图所示,upload 只是用来选择文件,在点击提交的时候再和其他的数据统一上传,并且要限制该文件只能上传一个,为用户最后选择的那个文件。不使用 action 属性 上传官方文档文档中描述到:action:是必选参数,上传的地址;http-request: 覆盖默认的上传行为,可以自定义上传的实现, 使用该属性的时候设置action 的属性值为#只能上传单个文件,并能覆盖上传官网 API 里有一个属性,limit(number原创 2020-05-17 21:02:23 · 22845 阅读 · 15 评论 -
Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录。相比传统的账号密码方便很多。企业微信扫码登录流程文档:(链接)对于前端来说,重要的是如何构造扫码登录链接:有两种方法:构造独立窗口登录二维码(不太符合需求)内嵌登录二维码(主讲)步骤一:引入 js 文件在 index.html 中通过 script 标签引入<!DOCTYPE html><html lang="zh-CN"> <head>原创 2020-05-14 18:14:10 · 6323 阅读 · 0 评论 -
Element通过v-for循环渲染的form表单校验
普通的form表单校验日常业务开发中,对于中后台管理系统,form表单校验是一个很常见的问题。查阅Element官方文档,我们了解到,form表单校验是这样的,需要给所校验的el-form-item添加prop属性值,这个属性值便就是当前元素v-model 所绑定的值。如图所示:v-for 循坏的表单校验那么问题来了,通过v-for 遍历循环渲染的form表单怎么添加校验呢?主要问题就在...原创 2020-03-15 22:31:38 · 12441 阅读 · 0 评论 -
Element-table表格多选的使用
需求如图所示:左边是一个可以多选的表格,右边需要实时展示选中的数据。需要实现:表格中的数据选中或取消选中时,右边需要实时展示。右边删除某一项时,表格中对应的那一项需要取消选中。切换页数的时候,之前列表的是否选中状态需要回显。踩坑第一次阅读文档,使用的是selection-change的事件,该事件是在 选择项发生变化时会触发该事件,所以当进行切换页数时,tableDat...原创 2020-03-06 19:02:52 · 10945 阅读 · 7 评论 -
Webpack4+vue2从零开始搭建项目
从零开始使用 webpack4 + vue2 搭建项目项目搭建创建文件夹 vueProject,进入文件夹后 npm initc 初始化项目安装 webapck 相关东西npm i webpack webpack-cli webpack-dev-server webpack-merge --save-dev安装后package.json文件就有其相关版本,如下:"webpack"...原创 2019-12-31 18:23:14 · 1266 阅读 · 0 评论 -
vue组件通信
父子组件通信问题只有父元素和子元素父元素通过 props 给子元素传递数据,子元素通过$emit 方法通过事件的方法向父元素传递数据// 父元素<Tab :currentTab="currentTab" :tablist="tablist" @change-tab="tabChange"></Tab><script>import Tab from...原创 2019-11-20 16:23:00 · 161 阅读 · 0 评论 -
vue组件的那些事
利用组件化实现todolist: 组件的注册及使用: 新建一个.vue文件,在其中完成组件的生成: 代码格式如下:<template></template><script></script><style></style>在主文件下应用组件:父子组件之间的通信: 在todolist中利用父组件给子组件添加list数据:原创 2017-11-08 20:44:51 · 174 阅读 · 0 评论