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>