Clearable and readonly in element-ui el-input cannot be used at the same time

clearable and readonly in element-ui el-input cannot be used at the same time

< el-input size= "small" v testValue model = "testValue" placeholder= "Please enter" clearable readonly > < / el-input >

cannot be emptied after using readonly

Aug.13,2021

readonly is a native attribute, and if the input box becomes read-only, the value cannot be changed. How to clear


maxlength = 0


I also have this need: the selection box is used as a selector, which cannot be entered, but can only be selected. Select to clear (as search criteria)

element-ui this pr hides the clear button in read-only or disabled state .

my solution is rough. Change the class and attribute, of the corresponding dom. I will control the read-only style myself:

{
  mounted () {
    try {
      const $carModelInput = this.$refs.carModelInput.$el
      $carModelInput.className += ' is-disabled'
      $carModelInput.firstElementChild.setAttribute('readonly', 'readonly')
    } catch (e) {
      console.log(e)
    }
  }
}
Menu