设置el-input的初始高度
时间: 2024-09-04 16:05:06 浏览: 49
在 Element UI 中,你可以通过结合 Vue.js 数据绑定和组件的 `style` 属性来设置 `<el-input>` 的初始高度。例如,在模板上你可以这样做:
```html
<template>
<el-input v-model="inputValue" :style="{ 'height': 'initialHeight' + 'px' }" type="textarea"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '',
initialHeight: '200', // 可自定义初始高度,单位为像素
};
},
};
</script>
```
这里,`initialHeight` 是一个数据属性,可以根据需要调整其值。注意在添加 `px` 单位是为了告诉浏览器这是一个像素值。
如果你希望高度由某个计算属性动态确定,可以在 `computed` 中创建:
```js
computed: {
inputHeight() {
return this.isLarge ? '300px' : '200px'; // 示例,isLarge 是另一个布尔属性决定是否为大输入框
},
}
```
然后在模板里使用 `inputHeight`:
```html
<el-input v-model="inputValue" :style="{ 'height': inputHeight }" type="textarea"></el-input>
```
阅读全文