vue
路遇春风
这个作者很懒,什么都没留下…
展开
-
antdv中table表格合并后鼠标移入背景色的显示问题
这是官网的例子,相同的title下颜色并不能全部选中,antd的表格提供了customRow这个方法用法效果原创 2022-06-27 17:46:53 · 1216 阅读 · 1 评论 -
vue根据后端数据生成form表单
vue根据后端数据生成form表单后端数据格式 formData: [ { label: '角色名称', id: 'name', //key值 type: 'input', //form的属性 placeholder: '请输入角色名称', }, { label: '渠道', type: 'select', id:原创 2022-04-28 15:36:30 · 3508 阅读 · 3 评论 -
vue实现记住密码功能
vue实现记住密码功能 <a-checkbox @change="onChange" :checked="checked"> 记住密码</a-checkbox> //默认checked为false //methods onChange() { this.checked = !this.checked }, //登录成功后 value为用户输入的账号密码 loginSuccess( value) { let val = JSON.str原创 2021-08-25 15:42:51 · 520 阅读 · 0 评论 -
vue实现一个滚动条
vue实现一个滚动条起初是想修改浏览器滚动条样式来达到效果但是查阅了资料 浏览器滚动条不能修改宽度与位置没办法只能自己写首先是滚动条样式 <div class="scrollBar" v-if="roleList.length > 5"> <div class="box" @mousedown="move" v-bind:style="{ width: activewidth + 'px' }"原创 2021-07-23 17:56:24 · 5074 阅读 · 9 评论 -
iview的switch开关不显示问题
<i-switch :value="switch1" @on-change="change" />data{switch1: false,}methods:{change() { this.switch1 = !this.switch1; console.log(this.switch1); },}原创 2020-11-24 11:45:37 · 1204 阅读 · 0 评论 -
iview的input输入框输入一个字符就失去焦点
一般是使用input遍历数组时候 <Row v-for="(item, index) in formValidate.ipList" :key="index+item.name" style="margin: 20px 0" > </Row>问题点在于:key=“item.name”input数据绑定后进行模型更新后,div的属性要刷新,进行渲染后就重新刷新的input.不要用item.name这种做k原创 2020-11-23 17:46:17 · 643 阅读 · 1 评论 -
iview中form表单校验list
需求点击添加 增加一行 但是在上一行ip地址为空的时候 不能添加代码<template> <div> <Button type="primary" @click="addlist('formValidate')">添加</Button> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"原创 2020-11-23 17:41:24 · 671 阅读 · 0 评论 -
Iview表格点击下一页获取复选框的值以及复选框选中后的回显
<Table :columns="columns" :data="list" ref="purchaseTable" @on-selection-change="selectTable" @on-select-cancel="selectCancel" />添加两个事件 参考iview官方文档https://www.iviewui.com/compon.原创 2020-10-10 16:33:32 · 1659 阅读 · 4 评论 -
简单的vue组件封装
简单的vue组件封装整个项目中都会用到这个样式的标题components目录下新建xxx.vue文件代码<template> <div class="divBg"> {{title}} <p style="float:right;color:#1C69D4;margin-right:30px; cursor: pointer;" @click="editor"> <Icon size="16" :type="icon" /&原创 2020-08-20 18:09:13 · 187 阅读 · 0 评论 -
vue中rules规则校验input框有值却不通过
vue中rules规则校验input框有值却不通过一般是数据类型影响的一般是后端给的数据是number类型的 渲染时把数据tostring一下就可以了原创 2020-08-20 18:00:40 · 3469 阅读 · 0 评论 -
vue点击div外部div消失
vue点击div外部div消失//全局点击事件 记得移除 mounted() { document.addEventListener("click", (e) => { this.downShow = false; }); },需要隐藏的div <div class="downloadList" @click.stop v-show="downShow"> </div>@click.stop 阻止事件冒泡即可...原创 2020-08-14 11:12:08 · 1216 阅读 · 0 评论 -
iview重置rules规则校验
iview重置rules规则校验 this.$refs['name'].resetFields();name值是form表单绑定的ref值原创 2020-08-14 11:06:52 · 1548 阅读 · 0 评论 -
vue封装公共echarts组件
下载echartsnpm install echartsmian.js中引入import echarts from 'echarts'Vue.prototype.$echarts = echartscomponents文件下新建echartsPie.vue文件<template> <div :id="this.id" style="width:100%;height:100%"></div> </t.原创 2020-06-20 15:03:37 · 1381 阅读 · 1 评论 -
vue项目中axios的二次封装
为什么要封装axios一般的项目是有三个url地址的 一个生产环境用的 一个测试环境用的 一个正式环境用的 如果不封装axios 切换环境就全部替换url不现实可以做请求和响应的处理src目录下新建utlis文件夹新建request.js文件代码import axios from 'axios' // switch (process.env.NODE_ENV) { // // 生产 // case "production": //原创 2020-06-17 17:43:29 · 2714 阅读 · 3 评论 -
vue脚手架跨域请求
根目录下新建vue.config.js脚手架会根据文件名自动匹配module.exports = { //runtimeCompiler: true, //publicPath: '/', // 设置打包文件相对路径 devServer: { // open: process.platform === 'darwin', // host: 'localhost', //去除eslint overlay: {原创 2020-06-16 17:48:29 · 263 阅读 · 0 评论 -
vue关闭Eslint校验
vue脚手架去掉Eslint规则cli2cli3cli2项目目录下build.js->webpack.base.conf.jscli3vue.config.js中加入 overlay: { warnings: false, errors: false },原创 2020-06-16 17:27:11 · 470 阅读 · 1 评论 -
element ui中input组件无法输入值
试了@input方法 不行无奈自己写了个(手动滑稽)原创 2020-05-03 18:32:40 · 408 阅读 · 0 评论 -
element ui前端分页 与后端分页的问题
区别:前端分页:一次性请求所有数据 然后前端对数据进行截取展示后端分页:需要我们把页码 请求条数发送给后端 后端根据条件每次返回对应的条数前端分页 <el-table :data="tableDatas.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%"&...原创 2020-05-03 18:31:01 · 1274 阅读 · 1 评论 -
vue刷新页面声明的变量没数据时,显示为花括号的解决方法
方法<style> [v-cloak]{ display: none; }</style><body><div id="app" v-cloak>v-cloak属性原创 2019-12-06 16:17:43 · 597 阅读 · 0 评论 -
vue根据input框的值检索列表
vue根据input框的值检索列表效果图代码<template><div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list数组 --> <li v-for="(item,index)...原创 2019-11-22 14:41:44 · 1352 阅读 · 0 评论 -
element ui表格根据id值合并列
element ui表格根据id值合并列效果首先 官方文档给的由例子地址html <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%"> <el-table-column ...原创 2019-11-22 14:36:59 · 2287 阅读 · 2 评论 -
对于iframe嵌套页面的跳转,以及携带参数,在目标页接受参数的问题
跳转打开源码可以看到 每个子页面的路由都是类似的 window.parent.document.getElementById('frame-dft').src='/indexCreate'只需要在事件里面重新设置src的参数就可以携带参数在src的后面可以拼接参数 window.parent.document.getElementById('frame-dft').src='/...原创 2019-11-19 16:49:47 · 6650 阅读 · 0 评论 -
根据复选框的值进行表格数据的筛选
根据复选框的值进行表格数据的筛选效果图为什么要把数据赋值给两个数组?效果图#点击后效果数据显示有点问题.不过这不是重点#代码部分 getValue(){ this.tableData=this.tableData1 //tableData 和 tableData1 是表格数据放在连个数据里面 let articl...原创 2019-11-19 16:34:00 · 1211 阅读 · 0 评论 -
echar图表titile,x轴,y轴样式
效果前后端不分离 ,没有用vue脚手架HTML <div id="ecLine" :style="{width: '49.5%', height: '310px'}"></div> <div id="zhLine" :style="{width: '49.5%', height: '310px'}"></div>JS methods:...原创 2019-09-09 18:11:22 · 389 阅读 · 0 评论 -
VUE+element UI遍历接口请求数据
js export default{ data(){ return{ //定义空数组接受数据 tableData_violation: [], }, created(){ // 并发发送多个请求 all[] axios.all([this.getTable1Data2(),]) .then(axios.s...原创 2019-09-12 14:40:35 · 1598 阅读 · 0 评论 -
请求到数据后echarts图表的重新渲染问题
export default{ data(){ return{ //定义接受数据的空数组 柱状图 e2data1:[], e2data2:[], } mounted() { //加载图表 this.drawLine(); }, created(...原创 2019-09-12 14:52:57 · 4554 阅读 · 0 评论 -
vue中n个元素同时绑定事件
n个元素同时绑定click事件这种方法在表格的操作中十分常见 <td v-for="(item,index) in yresult"> <span @click="productResult(index)">{{item}}</span> </td>在js中pro...原创 2019-09-24 16:07:48 · 577 阅读 · 0 评论 -
formdata清空
formdata清空的问题 let formData=new FormData; //清空formdata formData=null; formData=new FormData; formData.append("companyName",this.chose);//厂名 return axios.post('/StockFirs...原创 2019-09-24 16:10:42 · 4403 阅读 · 2 评论 -
forEach循环遍历数组
forEach循环遍历数组 this.trendChartOfDay.forEach((value,i)=>{ this.e1data1.push(value.count);//push方法添加到新数组 this.e1data2+=parseInt(value.count); //计算数组元素的和 });...原创 2019-09-24 16:16:00 · 1248 阅读 · 0 评论 -
element UI选择年,月,季度,双月
element ui 选择年,月,日,季度先来 年,月,日,这些都是element ui官方有的 <el-select v-model="value" placeholder="请选择" @change='change'> <el-option v-for="item in options" :key="item.va...原创 2019-09-24 16:29:11 · 4771 阅读 · 2 评论 -
axios向后端传值
axios向后端传值第一种JSON.stringify()方法axios.post('/console/initCalculationParam',JSON.stringify({ car_series: this.carOptionsValue, dateTime: this.value1,}),{ headers: { 'Content-Type'...原创 2019-09-24 16:39:49 · 2219 阅读 · 0 评论 -
echarts在vue脚手架中的应用
~~echarts在vue脚手架中的应用~~首先下载echarts这个模块cnpm install echarts --save然后在main.js中引入import echarts from "echarts"Vue.prototype.$echarts = echarts //将echarts存到Vue原型中demo<template> <div&...原创 2019-08-30 15:05:04 · 404 阅读 · 0 评论