原文链接：https://www.cnblogs.com/procedureMonkey/p/13600422.html
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>