![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
过年了^_^
这个作者很懒,什么都没留下…
展开
-
elementui表格嵌套下拉显示不同子数据
使用elementui表格组件,实现下拉显示子数据,并且子数据与表格行数据关联 首先有一个父表格 使用 @expand-change=“expandChange” 父表绑定数据是list 子表绑定数据是父表当前下拉行数据的detailsList 当然list 和 detailsList都是自己定义的名称。 <el-table :data="list" border fit highlight-current-row @ex原创 2021-07-01 19:27:32 · 1068 阅读 · 0 评论 -
vue中DOM元素可见区域大小根据屏幕大小调整可见宽、高度
以表格高度为例 data() { return { tableHeight:0 } } created() { this.setClient(); }, methods: { //表格高度适应可见区域大小 setClient() { this.changeClient() window.onresize = () => { this.changeClient() }原创 2021-05-26 12:02:58 · 563 阅读 · 0 评论 -
引入vant组件样式不显示
1.终端安装插件 npm i babel-plugin-import -D 2.配置.babelrc ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }]原创 2021-05-07 13:58:37 · 1261 阅读 · 0 评论 -
vue路由冗余:NavigationDuplicated: Avoided redundant navigation to current location
vue路由点击报出这个错误: NavigationDuplicated: Avoided redundant navigation to current location 在路由文件里: 1. 2. const ORIGINPUSH = Router.prototype.push Router.prototype.push = function push(location) { return ORIGINPUSH.call(this,location).catch(err => err) }原创 2021-05-07 09:58:18 · 466 阅读 · 0 评论 -
vue子传父传递事件
父组件 引入子组件,子组件事件testShowName,绑定父组件事件函数testEvent。 父组件事件传入一个参数rel并打印。 <template> <div> <test @testShowName="testEvent"></test> </div> </template> <script> import test from '../../components/test.vue' export def原创 2021-02-08 17:43:45 · 638 阅读 · 0 评论 -
使用 vue-cli 3创建vue项目
首先创建一个文件夹作为工作区。 vsCode打开这个文件夹,开启终端,也就是命令行工具。 1.输入如下命令,创建叫做Practice的项目,回车。 vue create Practice 2.回车后会出现这个提示: ?Please pick a preset: 选择一个预设 如果是第一次创建的话,会和我的不一样。因为我在此之前创建过项目了,所以会保留之前创建项目时的预设置。 前四条是之前创建的项目配置。可以选择和之前项目一样的配置。 默认Vue 2 配置 Defaut ([Vue 2] babel,es原创 2021-02-06 18:14:22 · 176 阅读 · 0 评论 -
vue基本指令使用
1.渲染 数据写在data里面,用插值表达式{{ }}展示数据 <div id="#app"> {{message}} </div> <script> const vm = new Vue({ el:"#app", data:{ message:"《送你一朵小红花》" } }) </script> 《送你一朵小红花》 2.条件渲染 v-if v-else /v-if v-if-else v-else <div id="原创 2021-02-05 16:59:57 · 122 阅读 · 0 评论 -
关于Vue中qs插件
qs插件是干什么的? 答:查询字符串解析和将对象序列化的库。data中有数组的时候,是需要序列化才能与后台进行传递的。 安装: npm install qs 引入: import qs from 'qs’ 一般应用有两种方式: 1.qs.stringify():将对象序列化成url的形式;以&进行拼接 2.qs.parse():将url解析成对象形式; qs.stringify(): let obj = { method:'query_data', user:'xiaoming', pas原创 2021-02-05 15:12:20 · 277 阅读 · 0 评论 -
关于页面间路由传参
页面跳转时,携带参数传过去,让被跳转的页面能获取到数据。 传参页面: 跳转时通过query发送数据data send(){ this.$router.push(path:"/跳转的路由地址",query:{data:发送的数据}) } 接收页面: 接收query里的数据data getQuery(){ const routerQuery = this.$router.query.data } ...原创 2021-02-05 11:57:27 · 87 阅读 · 0 评论 -
引用组件中 DatePicker日期选择器无法显示,日期格式转换
上次项目里遇到的一个坑,算是用笨办法解决了。笨办法也蛮好用的其实。 这里我用的是饿了么组件的日期选择器。如图是正常显示的情况。 但是api的接口穿的是 “xxxx年xx月xx日” 的中文格式。那这个日期组件自然无法显示了。 这时候需要对接口中的日期格式转换一下,让其中的年月日用 “ - ”来代替连接。 莫嘲笑,很好用。 这个 this.ocrDate.date 是接口中的日期。将其中年月日替换下重新赋给这个日期。那么这个接口的日期就是xxxx-xx-xx 也就是 yyyy-mm-dd了。 ...原创 2021-02-05 11:44:42 · 707 阅读 · 0 评论 -
vue中列表渲染
当数组中都有多个元素,然后想逐一把他们展现出来,首先想到的就是遍历数组。 vue中就有一个非常简单实用遍历的方法。 v-for data中有数组array const vm = new Vue({ el:'#app', data:{ array:["1","2","3","4","5"] } }) 在页面想展现出来 <div id="app"> <ul> <li v-for="(item,index) in array" :key="in原创 2021-02-05 10:56:11 · 47 阅读 · 0 评论 -
Vue使用axios
1.首先得安装吧~ npm install --save axios vue-axios 2.config–>建一个js文件,名字看你 3.http.js 里: import axios from 'axios' //引入axios const http = axios.create({ baseURL: '', //接口根路径 timeout: 90000, //请求超时时间 }) //post请求方式 export function post(ur原创 2021-02-04 16:24:43 · 105 阅读 · 0 评论 -
调api接扣更改数据键名
今天要做一个配置页面,是这样的 看见那个border-radius了?喔天哪~数据中当键名的时候可不能直接用-连接,得用_下划线。 但是,就想把_改成-,不仅如此我还要这么传给api!!!你奈我何???? 就是这样~ 没老铁~毛病! ...原创 2021-02-04 14:42:38 · 62 阅读 · 0 评论 -
调用方法创建临时变量,方法执行完毕临时变量自动销毁
这是今天vue项目里马虎掉的一个小bug,简单说下吧~ 代码如下(更改过的) 起初,为了让表单中某个输入框输入的值以数组的形式存起来,因为原先是字符串格式,所以写了个转换成数组的方法change(). 想的是,把用户输入的值转换后存到自己定义的一个数组,(这个数组在data里定义的,如图中第一个红框框)。然后把这个数组正儿八经的赋给表单数据中的那个输入框(应该可以说是替换吧)。 想的很完美,可但是但可是,忽略了一点。每次表单输入,转换的东西都会存到这个自定义数组,越来越多越来越多不会把上一次的值自动清理掉原创 2021-02-04 14:06:58 · 591 阅读 · 0 评论