element-ui,iview组件样式修改,框架自带样式修改,/deep/击穿

项目中经常要修改框架自带的样式,但是写style,却没有效果

方法一:给组件加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>

关于/deep/,一张图看懂:
在这里插入图片描述
看效果:
在这里插入图片描述

  • 7
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值