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>

　　

1.