VUE
付月半子
月亮很亮,亮也没用,没用也亮。
展开
-
vue小笔记
:style="{width: (it.yiJieru*100/it.deviceTotal)+'%'}":class="{'jieru-icon-img':'1==1','byq':jierus.deviceIcon=='0301'}"<div class="abnormal-factory-row-icon" :class="{'top1':item.index==1,'top2':item.index==2}"></div>向子组件传参,如传入t.原创 2022-01-13 10:40:30 · 120 阅读 · 0 评论 -
解决element-ui表格表头内容太长时的换行问题
用render-header(列标题 Label 区域渲染使用的 Function,即渲染这一列的列标题区域所用的函数)HTML:<el-table border :data="tableData" v-loading="loading" @row-dblclick="handleSelect" :row-class-name="tableRowClassName"> <el-table-column v-for="(item,index) in t.转载 2021-12-24 09:50:25 · 2549 阅读 · 0 评论 -
element-tree 封装懒加载树【默认展开前几层节点】
<template> <div id="commonTree"> <el-input class="inputFilterClass float_l" @input="changeInput" maxlength="15" placeholder="输入关键字进行过滤" size="mini" v-model="filterText" > </el-i.原创 2021-11-01 10:31:20 · 1165 阅读 · 0 评论 -
vue+element+sortablejs实现表格列的拖拽
1. css: dragTable.css@charset "UTF-8";.w-table{ height: 100%; width: 100%; float: left;}/* 拖动过程中,鼠标显示样式 */.w-table_moving .el-table th .thead-cell{ cursor: move !important;}.w-table_moving .el-table__fixed{ cursor: not-allowed;}.w-..原创 2021-09-13 11:09:48 · 1299 阅读 · 0 评论 -
element-ui的el-table动态修改表格展示列,table高度变小问题
转载:https://blog.csdn.net/weixin_43915587/article/details/115522396解决办法:在更新表格数据后对el-table进行重载this.$nextTick(() => { this.$refs.tableName.doLayout(); // el-table添加ref="tableName" });转载 2021-09-06 14:34:21 · 1433 阅读 · 1 评论 -
vue element 下拉框内容过长显示...鼠标悬浮显示全部
1.1. css 多选下拉框内容过长-用...代替/*下拉选择框-多选-内容过长-用...代替 begin */.el-tag.el-tag--info { background-color: #f4f4f5; border-color: #e9e9eb; color: #909399; max-width: calc(100% - 50px); /* white-space: nowrap; tex...原创 2021-09-06 14:00:24 · 6831 阅读 · 1 评论 -
vue Treeselect 控件:内容为空用中文提示
内容为空,默认提示 No options available.添加noOptionsText="暂无数据"<treeselect v-model="DiagnosisRule_params.jcxmggbid" :multiple="false" :options="DiagnosisRule_GgJcxmTree_datas" :show-count="false" :...原创 2021-09-02 10:21:57 · 4399 阅读 · 4 评论 -
vue element tree自定义树。内容过长显示...鼠标悬浮显示全部
css/*树悬浮框: 名字过长则显示...*/.span-ellipsis { width: calc(100% - 4px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: auto; padding: 4px 2px; border-radius: 4px;}应用<el-tree :data="Datas" :props="defaultProps原创 2021-09-01 15:05:29 · 4919 阅读 · 0 评论 -
element-vue
el-table:1.列格式化formatTime: function (row, column) { let date = row[column.property]; if (date == undefined) { return ""; } return date?moment(new Date(date)).format('YYYY-MM-DD HH:MM:SS'):'';},2.改变某列颜色(包括文字过长显示...的颜色)<原创 2021-08-31 11:24:43 · 125 阅读 · 0 评论 -
vue区分浏览器的 刷新与关闭事件
data() { return { _beforeUnload_time:0, _gap_time:0, } }, mounted() { //1.监听关闭浏览器本窗口 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListen.原创 2021-04-23 10:17:31 · 2027 阅读 · 0 评论 -
在vue页面中,使用audio标签 播放音频和视频
<template> <el-row style="background: #000;"> <audio ref="audio" :src="music_path"> <!-- <source src="" type="audio/wav">--> <!-- <source src="" type="audio/mpeg">-->.转载 2020-12-11 13:46:40 · 9336 阅读 · 0 评论 -
element-ui table自定义斑马条纹颜色
1.el-table 加 :row-class-name="xxxTableRowClassName"2.methods 中加方法xxxTableRowClassName({row, rowIndex}) { if (rowIndex%2==0) { return 'statistics-warning-row'; } else { return ''; }},3.css中加样式.el-table__row.statistics-warning-.原创 2020-10-28 10:39:08 · 10552 阅读 · 4 评论 -
Element-ui table去掉所有边框
el-table 加 class="customer-no-border-table"/*去掉表格单元格边框*/ .customer-no-border-table th{ border:none; }.customer-no-border-table td,.customer-no-border-table th.is-leaf { border:none;} /*表格最外边框*/.customer-no-border-table .el-table--bo..原创 2020-10-28 10:33:59 · 7912 阅读 · 0 评论 -
解决页面缩放后,vue中e-table在谷歌浏览器中表格线不对齐问题
vue中使用e-table时,发现会出现浏览器不兼容的问题,谷歌浏览器中表头的横竖线会有一点偏差解决方案:在style中加body.el-tableth.gutter{display:table-cell!important;}转载 2020-08-21 15:01:19 · 1299 阅读 · 0 评论 -
vue-element更改分页样式(颜色)
默认样式:更改颜色为:css:/*带背景的分页按钮背景色begin*/.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #08C0B9; color: #FFF;}.el-pagination.is-background ....原创 2020-04-20 15:50:16 · 10953 阅读 · 7 评论 -
VUE+ElementUI 校验表单的输入框是否含有特殊字符
data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符!!")); } else { callback(); ...原创 2020-02-14 12:06:21 · 3255 阅读 · 0 评论 -
vue 设置浏览器左上角图标
1.进入项目根目录下的index.js2.将自己的.ico图标放入static目录下,放入src下找不到。3.在<head></head>中加入 <link rel="icon" type="image/x-icon" href="static/heart_64px.ico">如下,已改...原创 2020-01-07 10:45:55 · 3368 阅读 · 0 评论 -
vue dialog请求页面的时候,第二次之后打开,不会查询重新请求数据
vue dialog请求页面的时候,第二次之后打开,不会查询重新请求数据,需要加 v-if="dialogLookVisible"原始:<el-dialog title="查看xxx" :visible.sync="dialogLookVisible" width="100%;" :close-on-click-modal='false' > <iframe...原创 2019-11-29 17:53:30 · 2781 阅读 · 0 评论 -
ElementUI+Vue 解决在使用el-dialog时,点击el-dialog外的其他区域会导致该对话框关闭。
今天,在做Element+Vue项目时遇到一个需求:甲方要求在Dialog打开状态下,点击该Dialog以外的区域会导致该Dialog关闭;正确的状态应该是只有在点击关闭按钮,或者是Dialog内的其他操作性按钮才能使得Dialog的状态变为关闭。转载 2019-11-21 17:30:57 · 4168 阅读 · 0 评论 -
vue Treeselect 控件:将options转换为合适的形式显示
Treeselect 的options 需要的代码格式为[{ id: 11, label: 'label', children: [...] }...]若我们接口返回的数据为[{name: "name111, uuid: "10915", child: null}],不满足此格式,需要以下方法转换。<treeselect v-model="formValue.sbi...原创 2019-11-05 15:48:17 · 1766 阅读 · 0 评论 -
vue封装axios(统一添加请求参数,如token useId等)
main.js中:import axios from 'axios'import VueAxios from 'vue-axios'import qs from 'qs';Vue.prototype.$qs = qs;//请求的拦截器/*axios.defaults.transformRequest=[function(data){ return qs.stringify(d...原创 2019-11-05 11:46:29 · 7113 阅读 · 2 评论 -
vue 使用代理、跨域
使用Vue框架开发时,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理。不跨域时,也建议用,易于维护改完配置之后需要重启项目才生效!1. config/index.js:proxyTable: { '/gwxmApi':{ target:'http://192.168.x.xx:8088/...原创 2019-10-16 14:11:18 · 270 阅读 · 0 评论 -
vue项目打包,背景图片的引用问题
1.config下index.js build 下assetsPublicPath:'./' 默认值是 ‘/’2. build下 utils.js 添加 publicPath: '../../'原创 2019-10-14 16:10:36 · 302 阅读 · 0 评论 -
vue Treeselect 树形下拉框 1.使用 2.问题总结
资源连接:https://blog.csdn.net/weixin_42414668/article/details/86715620API : https://vue-treeselect.js.org/#eventsA.安装:1.在项目中: cnpm install --save @riophae/vue-treeselect2.script引入:// impo...原创 2019-08-08 10:21:37 · 4875 阅读 · 0 评论 -
vue Treeselect 树形下拉框 : 获取选中节点的ids和lables
API:https://vue-treeselect.js.org/#events1.ids: 即value1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId)<template><treeselect ref="DRHA_EFaultModeTree" ...原创 2019-08-08 12:03:25 · 14405 阅读 · 4 评论 -
vue+element: 1.table内容一样的单元格合并 2.不论内容是否一样,某列合并,只显示第一行此单元格内容
1.如图:方法:objectSpanMethod() +rowSpan(),其中获取表格数据之后再调用rowSpan()<el-table highlight-current-row :data="DRD_EFaultMode_tableData" :span-method="obje...原创 2019-08-08 16:26:05 · 1564 阅读 · 0 评论 -
vue 路由、动态路由、传参、获取参数、
1.main.js : import router from './router'2.router文件夹下建index.jsimport Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home' import DiagnosisResultData from ...原创 2019-08-09 12:03:37 · 2649 阅读 · 0 评论 -
element ui的el-tree文字显示不全的解决办法
转自:https://blog.csdn.net/Beam007/article/details/84305216element ui的el-tree文字显示不全的解决办法方法一: 最简单的设置横向滚动条方法二: 添加拖拽条改变外层容器宽度方法三: 通过...表示 鼠标移上去显示全称使用element ui的树组件el-tree时,经常出现如下问题:el-tree渲染时因...转载 2019-08-29 16:20:28 · 4902 阅读 · 0 评论 -
vue三种传参方式
方式1.用query 相当于用get,地址栏会暴露参数传参:html方式<router-link :to="{path:/xxx,query:{param1:2,param2:001}}"></router-link>传参:jquery方式<template> <div> <a @click="router...原创 2019-09-19 13:52:15 · 708 阅读 · 0 评论 -
vue 监听某div滚动条的滚动事件
监听此div , 定义ref <div class="productSec" ref="rightContent" @mousewheel="scrool">mounted: function(){ //在mounted钩子函数绑定滚动条事件 this.$refs.rightContent.addEventListener('scroll', this.scroo...原创 2019-10-09 16:36:15 · 10707 阅读 · 0 评论 -
vue 像父级窗口传递参数window.parent.postMessage
window.parent.postMessage({"stateNum": stateNum ,"caseId": caseId }, 'http://xxxxx:8080');原创 2019-10-11 18:01:22 · 12771 阅读 · 0 评论