element-ui el-input 中的clearable和readonly不能同时使用

Question

element-ui el-input 中的clearable和readonly不能同时使用

<el-input size="small" v-model="testValue" placeholder="请输入" clearable readonly></el-input>

用了readonly后就不能清空了

Answer 1

readonly是原生属性，input框变成只读的，value就不能变了，咋清空

Answer 2

maxlength = 0

Answer 3

我也有这种需求：选择框作为选择器，不可输入，只能选择，选择后可清除（作为搜索条件）

element-ui 在这个pr中隐藏了只读或禁用状态下的清除按钮。

我的解决方式比较粗暴，改变对应dom的class和attribute，我自已来控制只读样式：

          <el-input
            ref="carModelInput"
            v-model="carModelSelected.label"
            placeholder="请选择"
            clearable
            class="w300"
            @clear="clearCarModel">
            <el-button slot="append" icon="el-icon-search" @click="carTypeVisible = true" />
          </el-input>

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