el-input el-col 自适应
时间: 2023-07-08 12:46:18 浏览: 60
如果你想让 el-input 和 el-col 自适应,可以使用 flex 布局。具体做法如下:
1. 给父元素(即包含 el-input 和 el-col 的元素)设置 display: flex;
2. 给 el-col 元素设置 flex: 1; 这样 el-col 就会自适应父元素的宽度;
3. 给 el-input 元素设置 width: 100%; 这样 el-input 就会自适应 el-col 的宽度。
示例代码如下:
```html
<template>
<div class="wrapper">
<el-col :span="12">
<el-input placeholder="请输入内容" v-model="inputValue" clearable></el-input>
</el-col>
</div>
</template>
<style>
.wrapper {
display: flex;
}
.el-col {
flex: 1;
}
.el-input {
width: 100%;
}
</style>
```
注意:以上代码只是示例,具体情况可能需要根据实际需求进行调整。
相关问题
el-input自适应当前div大小
要使 `el-input` 组件自适应当前的 `div` 大小,你可以使用 CSS 中的 `width: 100%` 属性。以下是一个示例代码:
```html
<template>
<div class="container">
<el-input v-model="inputValue" placeholder="输入内容"></el-input>
</div>
</template>
<style>
.container {
width: 300px; /* 设置容器宽度 */
height: 200px; /* 设置容器高度 */
}
.el-input {
width: 100%; /* el-input 组件自适应父容器宽度 */
}
</style>
```
在上面的代码中,我们创建了一个包含 `el-input` 组件的 `div` 容器。通过设置 `.container` 的宽度和高度,我们确定了容器的大小。然后,通过设置 `.el-input` 的 `width: 100%`,使 `el-input` 组件自适应父容器的宽度。
你可以根据需要调整容器的宽度和高度,以及其他样式属性来满足你的需求。这样,`el-input` 组件就会自适应当前 `div` 的大小了。
el-input textarea 高度自适应
el-input textarea 高度自适应可以通过添加一个监听文本框内容变化的方法,并在该方法中手动计算文本框的高度来实现。具体步骤如下:
1. 在 el-input 组件中添加一个监听方法 oninput,该方法用于监听文本框内容的变化。
2. 在该方法中获取 el-input 组件中的 textarea 节点。
3. 如果获取到了 textarea 节点,先将其高度设置为自适应,然后根据内容计算高度并设置为新的高度。
以下是一个示例代码:
```html
<template>
<el-input
autocomplete="off"
type="textarea"
:autosize="{ minRows: 3, maxRows: 10 }"
class="no-scroll"
ref="reviewInput"
@input="autoAdjustReviewInput"
></el-input>
</template>
<script>
export default {
methods: {
autoAdjustReviewInput() {
const textArea = this.$refs.reviewInput.$refs.textarea;
if (textArea) {
textArea.style.height = 'auto';
textArea.style.height = `${textArea.scrollHeight}px`;
}
}
}
};
</script>
```
在上述代码中,我们通过 `@input="autoAdjustReviewInput"` 将 `autoAdjustReviewInput` 方法绑定到 el-input 组件的输入事件上,当文本框内容发生变化时,会触发该方法,从而实现了 el-input textarea 的高度自适应。