element ui plus自定義樣式

很多情況下我們要自定義element ui的樣式，如下要實現輸入框去掉邊框

template代碼

<template #default="scope">
              <el-input :readonly="scope.row.isEdit"  :class="scope.row.isEdit ? 'noEdit':''"  style="width: 70%;" size="small" v-model="scope.row.name"></el-input>
</template>

 less scss樣式穿透(也叫深度選擇器)

只需試用/deep/

css代碼

.noEdit{
   /deep/ input {
      border: 0;
    }
}

這里需求是要動態去綁定類名，效果圖如下，上面的輸入框邊框去掉