element UI el-button的@click事件使用三元表达式无效问题
相信不少人入坑，其实只是细节的问题。如果使用三元表达式，方法要加括号，如果不使用三元表达式，方法则可以不加括号<el-button @click.native="isCreate ? '' : handleAdd()" style="margin-right: -8px;">新增</el-button><el-button @click="handleAdd" style="margin-right: -8px;">新增</el-button>.
vue style使用三元表达式
直接贴代码<div :style="{'cursor': isCreate?'not-allowed':''}">新增</div><div :style="{'cursor': isCreate?'not-allowed':'','margin-right':'-8px'}">新增</div>
JS 新语法「可选链」「双问号」
下面这种写法如果val数组为空，控制台会报错handleSelectionChange (val) { this.batchDelName = val[0].environmentName this.ids = val.map(item => item.id) }下面使用了js新语法，控制台则不会报错handleSelectionChange (val) { this.batchDelName = val[0]?.environmentNa.
关于css设置font-size小于12px无效解决问题
参考了广大网友的资料使用transform就可以解决，可能需要考虑浏览器兼容问题.settingFont{ transform: scale(0.85); }
el-select样式调整
关于element UI的el-select下拉选择框的样式调整问题，将popper-append-to-body属性设置为false,则下拉框和输入框就不会出现分离的现象，而且可以设置下拉内容的样式<el-select v-model="svalue" placeholder="未选择项目" filterable clearable @change="handleButton" class="selectInput" :popper-append-to-body="false"&g.
css：鼠标经过img标签替换src路径
经过在网上肆意搜罗，终于找到可以在css实现鼠标经过img标签替换src路径的写法，因为项目使用的是vue框架，所以不想再引入jquery和原生js的写法，不方便<img src="../../assets/icon/edit.png" class="editImgSty">.editImgSty:hover{ content: url(../icon/addForm.png); }...
element UI form表单的提交按钮不在form内，提交触发验证
前置条件：使用的是vue,浏览器是Chrome开发有时候，form表单的提交按钮不一定在form内，那么要实现当按钮在form表单外也要触发校验的功能。直接贴代码如下html部分：<el-button @click.native="handleSave">保存</el-button><el-form :model="messageForm" :rules="messageFormRules" ref="messageForm" label-width="75px.
vue过滤数组对象的空数据（filter( ) 过滤数组方法）
与后台对接，前端往往需要做这种校验，提交数组到后台，如果数组对象的某个值为空，则过滤掉这个对象再传给后台let queryList = this.queryList.filter((item) => { return item.name !== '' }) console.log('kk', queryList)如果参数名为空，则过滤此条数据...
vue .map遍历一个数组获取新的数组
let ids = data.data.data.map(item => { return { id: item.id, hostName: item.hostName } }) console.log('ids', ids)
vue 使用css根据屏幕大小宽度自适应调整
<style>/* 屏幕小于1440px */@media screen and (max-width: 1439px) { .add{ width: 260px; }}/* 屏幕等于1440px */@media screen and (max-width: 1440px) and (min-width: 1440px) { .add { width: 348px; }}/* 屏幕大于1440px */@media screen and
vue fixed定位 ，css 宽度计算
使用fixed定位，设置宽度100%的话是根据整个windows的宽度为基准的。所以常常需要计算.headerWidth{ width:calc(100% - 220px)}
vue 三元表达式动态绑定class
vue使用三元表达式绑定class<div :class="[isActive ? 'active' :'']"> 测试</div><script>export default { data () { return { isActive: true } }}</script><style scoped> .active { font-size: 16px; } .normol {.
vue使用scoped之后，改变UI组件样式无效问题
在vue项目的开发中，想要改变UI组件的样式，在加了scoped限制后，样式改变无效，不加的话，如果其他页面有相同类名，又会影响其他页面的样式。其中一种两全其美的方法就是使用/deep/深度修改组件的样式。以修改element UI的el-dialog弹框头部样式为例不加scoped的修改，但是如果其他页面也有弹框就会影响到其他页面<el-dialog title="删除" :visible.sync="delDialogVisible"> 您确定要删除吗？ .
vue v-for循环下奇数行和偶数行样式
<div v-for="item in list" :key="item.id" class="list-style"> <div class="item-style"> <p> {{item.preName} </p> </div> </div> <style> /* 奇数行的样式 */.list-style:nth-child(odd)>.
vue setTimeout()调用方法与不调用方法的使用
不调用方法setTimeout(function () { console.log('谢谢') }, 3000)调用方法 setTimeout(this.startProgress(), 5000)
在vue中使用codemirror编辑器
第一步：安装vue-codemirrornpm install vue-codemirror --save第二步：引入（本文使用的是在组件局部引入）import { codemirror } from 'vue-codemirror'// 核心样式import 'codemirror/lib/codemirror.css'// 引入主题后还需要在 options 中指定主题才会生效import 'codemirror/theme/rubyblue.css'import 'codem.
el-form 表单 正则表达式 校验
element UI<el-form ref="ruleForm" :rules="rules" :model="addEditForm" label-width="80px"> <el-form-item label="角色名称" prop="roleName" > <el-input v-model.trim="addEditForm.roleName" placeholder="填写角色名称" style="width:250px.
今日推荐
周排行