将el-input框设置为 textarea （ElementUI）

最新推荐文章于 2024-08-22 13:57:45 发布
最新推荐文章于 2024-08-22 13:57:45 发布
阅读量7.7k 收藏 2
点赞数 2
分类专栏： css 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51196135/article/details/122968451
版权

1、示例

2代码

其中：就是在el-input中添加了一些属性：

①：type="textarea"              //将input变为文本框

②：rows="4"                         //设置行高

③：placeholder="描述"        //提示文本 

小只笨笨狗～
关注
专栏目录
vue + el-input 中 textarea实现placeholder换行
embraceblankandfull的博客
06-14 760
​此文包含实现el-input textarea 的多种方法，最关键的是包含 一种 vue el-input textarea 都可使用的换行实现方法。
el-table下el-input框实现点击变成输入框的文本内容~~~
zhangwenxin0519的博客
11-08 2009
新手上路，在工作空闲时间把在项目中学到的小功能总结一下~~~~ 实现功能展示： 点击确认按钮效果如下： 点击确认输入框中选择的内容变成文本展现在el-table表格中~ 功能实现： html部分： <el-table class="table_list" :data="attData" ..
vue+element中，el-input type=“textarea“ 实现自定义末端行数限制提示
ilcn1949的博客
08-16 590
根据element 官网上的用法：有个属性是show-word-limit配合:maxlength="10000"使用，就会出现在文本框的右下角提示字数显示：已输入/最大可输入字符。但是我发现如果要实现需求图中的效果，这个属性是没办法使用的，然后看了一下相关的源码，textarea是没有这种的插槽。于是另辟蹊径，发现了一个新的写法，话不多说，直接上代码片段1。
el-input textarea输入框 字体英文输入问题、回车提交、ctrl+enter换行等问题
yongyafang123的博客
02-26 3883
el-input 回车键、字体输入问题
el-input type=‘textarea‘ 样式难修改的问题
qq_39016177的博客
08-08 483
el-input type='textarea' 样式修改的问题
关于el-input的多行文本框textarea固定多行不可拖拽
qq_22187895的专栏
04-12 3475
的textarea属性下的多行文本框，我真是用一次讨厌一次，我也不知道为什么每次那个autosize的属性用着没效果，rows也是没有用，怎么都是一行，真是烦的我（后面有时间我得去看看是为什么了）。将:resize属性设置为none，不可拖拽，同时:autosize=设置成自己想要的行数。因为我试了一下没有效果，组合:resize没有效果，单独用也没有效果。不要问我问什么不使用:rows=“4”，所以就是要按上面那样这么设置了。
element-ui中的el-input 和el-textarea中的placeholder字体不一样
liuli0927的博客
07-14 716
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
ElementUi中ref和id两种方式或者dom进行样式更改；el-input，el-select，el-textarea通过ref获取改变边框等样式，及通过id获取改变样式
qq_41180882的博客
10-19 1257
ref和id两种方式或者dom进行样式更改在需要的地方通过ref设置好名称，然后通过array拿到对应需要改变的ref，通过遍历对每个进行样式更改，通过refs拿到的进行验证，判断是输入框还是文本域还是选择框，然后做样式更改。利用ref获取到单独的框，然后通过末班字符串形式遍历加上去改变样式，也可以自己打印refs，可以看看对比取消样式改变。
element el-input 去掉边框
热门推荐
web15870359587的博客
02-26 1万+
element样式还是蛮好的，只是有时候我们需要做一些调整，比如，el-input 的边框，官网是这样子的 我们需要这样子的 然后我们常规操作，**border: none;**或者 border: 0; 发现行不通，哈哈哈哈哈 tip：将border属性设成0，虽然边框不见了，但是浏览器依然会对border-width和border-color进行渲染，会占用浏览器的资源。将border设置成none，浏览器就不会做出渲染动作。 然后就就，就发现个好东西，>>>， >>&
Vue文本域属性＜el-input组件仿clearable，重写清空按钮
最新发布
Aotman_的博客
08-22 559
Vue文本域属性
el-input type=‘textarea’后高度自适应
weixin_61397543的博客
12-04 2148
可以配合css属性resize: none;
element ui el-input输入框type=textarea禁止上下拖动
cnfabu的博客
08-12 283
设置resize="none"
设置＜el-input type=“textarea“/＞高度
guapilixianghe的博客
03-24 8988
.el-textarea{ height:88px; :deep(.el-textarea__inner){ height: 88px; } }:deep(.el-input__wrapper){ font-size: 14px; width:100%; height:32px; }
el-input type=“textarea” 高度问题
weixin_64372719的博客
03-16 2435
el-input type=“textarea” 高度问题
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
放弃不难，但坚持一定很酷！
03-07 1949
攻克 el-table 多列 td 嵌套 el-input type=“textarea” 使 textarea 自适应(autosize) 能自动撑满该行 td 单元格
elementui el-input输入框类型为textarea时，将输入的数据保存换行和空格，并展示换行和空格
DarlingYL的博客
03-27 3162
el-input输入框类型为textarea时，如果不做数据处理，是不会保存换行和空格的说输入了换行，但是保存数据后不会进行换行，需要保存输入的换行。
el-input type=‘textarea’后高度设置
我的代码没有bug的博客
07-15 1万+
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。 关键代码：:autosize="{ minRows: 5, maxRows: 5}" <el-input type="textarea" :maxlength="500" :autosize="{ minRows: 5, maxRows: 5}"></el-input> ...
element UI 设置type=“textarea“ 禁止输入框缩放
马优晨
04-10 1634
时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。注意上图，第一张是可以缩放的，第二章不能缩放的。
<el-input style="width:82.5%" v-model="textarea" :rows="2" type="textarea" placeholder="Please input" />怎么将后台传入的数据绑定到textarea上，显示在el-input框中
07-28
要将后台传入的数据绑定到textarea上并显示在el-input框中，你可以使用v-model指令将后台数据与textarea进行双向绑定。在el-input中，将v-model的值设置为后台传入的数据即可实现数据的绑定和显示。例如，你可以将v-model的值设置为"textarea"，然后将后台传入的数据赋值给"textarea"，这样就可以将数据显示在el-input框中了。具体代码如下所示： <el-input style="width:82.5%" v-model="textarea" :rows="2" type="textarea" placeholder="Please input" /> 其中，v-model="textarea"将textarea与后台数据进行双向绑定，将后台传入的数据赋值给textarea即可显示在el-input框中。 #### 引用[.reference_title] - *1* *3* [Element UI学习2--input输入框](https://blog.csdn.net/hanrabbit/article/details/112278419)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [将el-input框设置为 textarea （ElementUI）](https://blog.csdn.net/qq_51196135/article/details/122968451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值