自定义修改elementUI组件样式(贯穿样式)
方法一:给组件加id / class,在style一面直接修改,注意style不要加scoped,vue可以有多个style结构:<template><Modal v-model="params.modal1" :title="tit" :mask-closable="false" id="noAssessmentDate"><Row>...
·
方法一:给组件加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>
更多推荐
已为社区贡献4条内容
所有评论(0)