vue 插件 css樣式修改

vue有很多插件,但是插件的樣式都是固定的,有些時候你能找到頁面上的class屬性去設值樣式,但是效果老是不生效;

很多入門vue的后端開發人員 可能不太了解這方便,這里給大家一個例子,僅供參考

這里推薦使用深度樣式選擇

例1:你要修改input的高度

<treeselect
              v-model="areaSelectParam.areaId"
              :value="areaSelectParam.areaId"
              :loading="loading"
              :multiple="true"
              :clearable="false"
              :defaultExpandLevel="1"
              :limit="3"
              :options="areaOptions"
              placeholder="選擇機構"
              @select="selectDepart"
              @deselect="deleteDepart"
            />

錯誤示范:找到頁面上的class屬性,但是怎么也不生效

 .vue-treeselect__control {
    height: 32px;
    display: block;
  }

正確示范:

  .vue-treeselect >>> .vue-treeselect__control {
    height: 32px;
    display: block;
  }

使用  (插件名稱 >>>  樣式class名稱) 才能生效

其他樣式:

// 設置placeholder字體大小

<style scoped>

.vue-treeselect >>> .vue-treeselect__placeholder { font-size: 14px; }
// 設置 margin-bottom 大小

.vue-treeselect >>> .vue-treeselect__control-arrow { 
margin-bottom: 4px; 
}

</style>

記得style標簽里面要加  scoped ,否則設置的屬性不會生效

例2: 設置el-table的表格屬性

<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" border style="width: 100%;" :row-class-name="tableRowClassName">
  <!--<el-table-column type="selection" width="55" />-->
  <el-table-column type="index" label="序號" :index="indexMethod" fixed />
  <el-table-column prop="createDate" label="催辦時間" align="center" >
    <template slot-scope="scope">
      <i v-if="scope.row.isRead=='0'" class="el-icon-folder"/>
      <i v-else class="el-icon-folder-opened"/>
      <span>{{ parseTime(scope.row.createDate) }}</span>
    </template>
  </el-table-column>
</el-table>

<style scoped>
  .el-table >>> .read-row {
    color: #4F0000 !important;
    background: #e1dfdf;
  }

  .el-table >>> .not-read-row {
    color: #000000 !important;
    font-weight: bold;
  }
</style>