输入框禁用

通过 disabled 属性指定是否禁用 input 组件

<el-input placeholder="请输入内容" v-model="input" :disabled="true"> </el-input> <script> export default { data() { return { input: '' } } } </script>

可清空 

使用clearable属性即可得到一个可清空的输入框

<el-input placeholder="请输入内容" v-model="input" clearable> </el-input> <script> export default { data() { return { input: '' } } } </script> 

 

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

<div class="demo-input-suffix">属性方式：<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input1"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input2"></el-input>
</div>
<div class="demo-input-suffix">slot 方式：<el-inputplaceholder="请选择日期"v-model="input3"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div><script>
export default {data() {return {input1: '',input2: '',input3: '',input4: ''}}
}
</script>