技術標籤：vuevue

1、當頁面只存在一個第三方元件的時候，為不影響其它頁面的元件的使用可以使用/deep/進行修改，例：

      <el-select v-model="value"  placeholder="請選擇" style="width: 13%;margin-left: 2%;top:-3px" @change="selectChart">
        <el-option
          v-for="item in deviceData"
          :key="item.id"
          :label="`${(item.dName)}`"
          :value="item.id"
        />
      </el-select>
 

更改其高度：

<style scoped>
/deep/.el-input--medium .el-input__inner{
  height: 24px;
  line-height: 24px;
}
/deep/.el-input--medium .el-input__icon{
  line-height: 24px;
}
</style>

2、當一個頁面存在多個相同的第三方元件的時候，需要分別修改其樣式
例如：

         <el-select v-model="value2" class="new_class" placeholder="請選擇需要比較的資料" style="width: 18%;height: 40px;margin-left: 1%">
            <el-option
              v-for="item in selectedData"
              :key="item.pNo"
              :label="`${(item.pName)}`"
              :value="item.pNo"
            />
          </el-select>
          <el-select v-model="value1" class="classnew" placeholder="請選擇" style="width: 18%;position:absolute;right:0px;" @change="selectTwoMenu">
            <el-option
              v-for="item in twoMenuData"
              :key="item.id"
              :label="`${(item.menuName)}`"
              :value="item.id"
            />
          </el-select>
 

<style scoped>
.new_class/deep/.el-input--medium .el-input__inner{
  height: 36px;
  line-height: 36px;
}
.new_class/deep/.el-input--medium .el-input__icon{
  line-height: 36px;
}

.classnew/deep/.el-input--medium .el-input__inner{
  height: 24px;
  line-height: 24px;
}
.classnew/deep/.el-input--medium .el-input__icon{
  line-height: 24px;
}

</style>
 

效果：