vue前端
姜崽
这个作者很懒,什么都没留下…
展开
-
element ui 日期选择框,开始日期不能晚于当前日期,结束日期不能早于开始日期、也不能晚于当前日期
**需求:**日期选择框事件范围内假如开始时间选择2020年,那么结束时间不能早于2020,也不能大于当前日期选择开始时间: 无法选择比当前时间大的开始时间选择2017年那么 结束时间也不能大于当前时间代码实现<el-form-item label="台历日期"> <el-date-picker v-model="dataForm.startDate" type="year" :picker-o原创 2021-07-30 11:03:30 · 4176 阅读 · 0 评论 -
element ui下拉框根据输入的内容查询出option
最终实现的样子 资料 看到官网的select创建条目远程搜索当我们新增企业信息的时候,如果企业存在,就从下拉框模糊查询公司名,根据下拉框可输入的内容去匹配公司号码,如果不存在,就创建公司,新增公司号码<el-select v-model="dataForm.name" filterable remote reserve-keywor原创 2021-03-31 16:35:09 · 619 阅读 · 1 评论 -
vue父组件与子组件相互传值
父组件传值给子组件1.父向子传值props父组件:子组件:(1)props: {inputName: String,required: true}(2)props: [“inputName”]2子组件给父组件传值//子组件自定义一个按钮触发onSubmit()方法;<el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-原创 2021-03-22 17:55:36 · 145 阅读 · 2 评论 -
vue监听input标签中内容的变化,调用接口
通过输入名称,就可以拿到相应的东西<el-form-item label="名称" prop="name"> <el-input v-model="dataForm.name" placeholder="产废企业名称" @input="search($event)"></el-input> </el-form-item>这里的重点是:在vue中,监听input输入事件,使用的是v-on指令。v-on: i原创 2021-03-19 15:29:11 · 4042 阅读 · 3 评论 -
element ui 一键清空多个input中的参数
条件查询过多,清空input框浪费时间,所以一键清空1.一次性清空这两个框里面的数据2.清空按钮,绑定方法<el-button @click="funClear" type="danger">清除</el-button>这里两种方式,都可以达到效果// 清空所有输入框的值 funClear () { var txts = document.getElementsByTagName('input') for (var i =原创 2021-01-15 16:39:30 · 2670 阅读 · 4 评论 -
element-ui中input校验只能输入数字
<el-col :span="12"> <el-form-item label="产生量(吨)" prop="productAmount"> <el-input onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" v-model="dataForm.productAmount" placeholder="产生量(吨)" style="width: 200px"><原创 2020-12-26 15:33:45 · 2453 阅读 · 6 评论 -
vue+element ui table导出勾选、全部数据
一:第一种方式1 安装依赖npm install --save xlsx file-saverid写在里面,才能够导出数据// 下面的方法中也有注释id="out-table"绑定事件 <el-form-item> <el-button @click="exportExcel">导出</el-button> </el-form-item>引入组件 // // 引入导出Excel表格依赖 //原创 2020-11-23 19:53:50 · 2843 阅读 · 1 评论 -
vue实现antv g6拓扑图
1.安装antv g6执行命令即可npm install @antv/g6在页面中引入import G6 from '@antv/g6'界面<template> <div id="container"></div></template><script> import G6 from '@antv/g6' // import insertCss from 'insert-css' export default原创 2020-11-09 20:12:19 · 5412 阅读 · 8 评论 -
echarts中图表X轴字体太长,换行或者倾斜
处理X轴字体太长问题当我们发现x轴的字体太长,第二个显示不了只需在echarts中配置就可以了换行处理想每行显示几个字,可以修改var provideNumber = 2即可xAxis: [ { axisLabel: { // 坐标轴刻度标签换行处理 formatter: function (params) { var newParamsName原创 2020-10-29 20:28:14 · 2654 阅读 · 1 评论 -
vue+element ui中tabs标签页,跳转新的页面
使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。1.建立父组件 aaa.vue 建立子组件bbb.vue和ccc.vue在父组件中写以下代码<!--aaa页面 父组件--><template> <div class="tabZujian"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-原创 2020-10-13 17:08:16 · 9990 阅读 · 3 评论 -
vue或者H5实现百度地图拾取经纬度,并且搜索标记
1.H5实现百度地图坐标拾取H5效果图展示使用CDN方法引入百度地图的js文件 <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3&services=true"></script>话不多说,直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8">原创 2020-10-09 21:45:02 · 1743 阅读 · 3 评论 -
element ui 动态表格,根据第一个字符,判断字体的颜色
element ui 动态表格,根据表格第一个字符,显示不同颜色效果图1.在el-table 标签内<el-table // 通过:cell-style :cell-style="cellStyle" :default-sort="{prop: 'id', order: 'descending'}" :header-cell-style="{background:'#ebeffb',color:'#000'}" :data="dataList原创 2020-10-07 20:06:59 · 521 阅读 · 0 评论 -
element ui ---table中,单独改变某个列或者行的属性
element ui —table中,单独改变某个列或者行的属性 例如(改变某个列的背景颜色、去除表格分割线)1.在el-table中添加:cell-style="columnStyle"其中columnStyle是自己写的一个方法2.在methods里面写方法columnStyle ({row, column, rowIndex, columnIndex}) { if (columnIndex === 0) { // 返回去除表格中的横线原创 2020-10-07 19:48:18 · 3632 阅读 · 3 评论 -
vue+element ui--table中自定义排序
table中关键{{sortNum(scope.$index+1)}}<el-table-column header-align="center" align="center" label="序号" width="50"> <template slot-scope="scope"> // 调用methods 方法中的sortnum方法,传参 {{sortNum(scope.$index+1)}} </template></e原创 2020-10-06 20:05:49 · 1429 阅读 · 0 评论 -
vue+elementui+百度地图
1.安装vue-baidu-map组件cnpm -i --save vue-baidu-map2.新建vue界面需要自己获取秘钥秘钥的获取方式,官网获取获取成功以后,填写到ak位置上<!--百度地图--><template> <el-row :gutter="20"> <el-col :span="24"> <el-card shadow="never" class="mapBox1">原创 2020-10-06 17:02:26 · 5904 阅读 · 11 评论 -
vue-项目中less报错 Module build failed: TypeError: loaderContext.getResolve is not a function问题解决以及安装less
vue-项目中less报错 Module build failed: TypeError: loaderContext.getResolve is not a function问题解决以及安装less1.查看你的package.json文件1.1安装less1.2 打开build目录1.3 下载依赖1.4 然后启动项目2 (loaderContext.getResolve is not a function问题解决)2.1 降低版本(解决问题)2.2 修改完成以后,重新执行命令3 问题解决1.查看你的pa原创 2020-10-05 21:53:42 · 3023 阅读 · 1 评论