自定义修改elementUI组件样式（贯穿样式）

方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多个style
结构：

<template><Modal v-model="params.modal1" :title="tit" :mask-closable="false" id="noAssessmentDate"><Row><Col span="24"><span>选择日期:</span><DatePicker type="date" placeholder="开始日期" :options="options" v-model="startTime" style="width: 200px"></DatePicker><span>至</span><DatePicker type="date" placeholder="结束日期" :options="options" v-model="endTime" style="width: 200px"></DatePicker><Button type="success" style="margin-left:20px" @click="add">添加</Button></Col></Row><div style="padding:20px 0"><Tag v-for="(item,index) in list" :closable='item.closeable' :key="index" v-if="item.time" @on-close="handleClose(index)">{{item.time}}</Tag></div><div slot="footer"></div></Modal>
</template>

样式：

<style>
#noAssessmentDate .ivu-modal {width: 686px !important;
}
#noAssessmentDate .ivu-tag {width: 105px;//修改tag的宽度
}
#noAssessmentDate .ivu-icon-ios-close-empty:before {color: red; //红x
}
</style>

方法二：
利用深度/deep/深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐）
结构：

<Table :columns='tableColums' :data='tableData' stripe id="tab_keyTag" ref="table" @on-selection-change='selectionChange'></Table><style scoped>
#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox {display: none;cursor: none;
}
#tab_keyTag /deep/ .ivu-table .ivu-table-header label:after {content: "选择";
}
#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox-wrapper {cursor: default;pointer-events: none;
}
</style>

自定义修改elementUI组件样式（贯穿样式）相关推荐

修改elementUI组件样式无效的多种解决方式
前言:vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题, 原因:在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加s ...
修改elementui组件el-input样式
修改elementui组件el-input样式效果展示: 鼠标移入后效果: <el-inputplaceholder="搜索抖音昵称"prefix-icon="e ...
angular新版父组件修改子组件某个div样式
 <div class="wrapper"><app-child></app-child& ...
修改elementUI组件样式无效的问题研究
问题背景:el-tabs的选项卡默认字体是14px,大了,想改成12px,结果在style里面加样式总是不生效. 解决:样式放到app.vue里面,样式就生效了 .panel-content .el- ...
android timepicker 不可编辑,iView -- TimePicker 自定义修改时间选择器选择时间面板样式...
期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改样式. 原生js 代码,如下: ...
iView -- TimePicker 自定义修改时间选择器选择时间面板样式
iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...
修改element-ui默认的开关样式
参考https://blog.csdn.net/WwangXue/article/details/90038947 默认样式: 修改为: CSS代码: .el-switch__core{ he ...
自定义/修改微信二维码样式
在写项目的时候遇到的一个需求,登录和注册都可以通过扫描微信的二维码来实现,但是在做的时候发现微信有一些它自带的样式,并且无法通过CSS直接修改. 通过查微信的开发者文档发现是支持修改的 wxHandl ...
修改ElementUI默认滚动条的样式
一.默认的滚动条很宽很占地方,不美观,与页面设计格格不入. 二.优化后的滚动条很美观,可以根据实际风格调整颜色,宽度,高度等. 三.优化代码在全局样式里加入以下代码,或者在需要使用的地方单独引入 ...
前端学习（1874）vue之电商管理系统电商系统之修改element-ui组件的按需导入
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

自定义修改elementUI组件样式（贯穿样式）

自定义修改elementUI组件样式（贯穿样式）相关推荐

最新文章

热门文章