26-自定义修改elementUI组件样式(贯穿样式)
原文参考:https://blog.csdn.net/weixin_38291260/article/details/89916683
也可参考:https://www.cnblogs.com/robinunix/articles/11227788.html 这个下面的参考,11227788.html 这个里面就应用了如何自定义修改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>
做有积累的事~~