element-ui textarea备注 textarea 多行输入框

server/2025/1/21 6:54:39/

发现用这个组件,为了给用户更好的体验,要加下属性

1. 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。:autosize="{ minRows: 3, maxRows: 6}"

2. 输入长度限制 maxlength

3. 是否显示输入字数统计 show-word-limit

1. 显示

2. 写法

<div class="remark"><div class="label item-label" style="line-height: 40px;padding-left: 20px;box-sizing: border-box;width:100%">主要来访嘉宾姓名及职位</div><el-inputtype="textarea"v-model="visitForm.guest":autosize="{ minRows: 3, maxRows: 6}"maxlength="200"class="form-input"placeholder="填写示例:张三-院长,李四-设备科科长;"show-word-limit></el-input>
</div>

3. 提交必填校验

这个注意输入全是空格的情况,因为element-ui输入空格也算1个字符,

 // 文本域 判断是否为空
isEmptyOrWhitespace(str) {return !str || str.trim().length === 0;
},
if (this.isEmptyOrWhitespace(visitForm.guest)) {this.handleMessage("主要来访嘉宾姓名及职位必填")return;
}

http://www.ppmy.cn/server/160107.html

相关文章

Pandas 数据分析(二)【股票数据】

股票数据分析 写在前面题目背景021 加载股票数据到CSV文件022 查看基本信息和数据统计023 更改索引列为普通数据列024 给数据添加月份和年份025 计算每年的平均收盘价026 找到收盘价最低的数据行027 筛选出部分数据列028 设置日期列为索引列029 删除不需要的数据列030 对数据列…

如何使用 JSONP 实现跨域请求?

以下是使用 JSONP 实现跨域请求的步骤&#xff1a; 实现步骤&#xff1a; 1. 客户端设置 在客户端&#xff0c;你需要创建一个 <script> 标签&#xff0c;并将其 src 属性设置为跨域请求的 URL&#xff0c;并添加一个 callback 参数。这个 callback 参数将包含一个函数…

STM32补充——FLASH

目录 1.内部FLASH构成&#xff08;F1&#xff09; 2.FLASH读写过程&#xff08;F1&#xff09; 2.1内存的读取 2.2闪存的写入 2.3FLASH接口寄存器&#xff08;写入 & 擦除相关&#xff09; 3.FLASH相关HAL库函数简介&#xff08;F1/F4/F7/H7&#xff09; 4.编程实战 …

麦田物语学习笔记:创建TransitionManager控制人物场景切换

基本流程 制作场景之间的切换 1.代码思路 (1)为了实现不同场景切换,并且保持当前的persistentScene一直存在,则需要一个Manager去控制场景的加载和卸载,并且在加载每一个场景之后,都要将当前的场景Set Active Scene,保证其为激活的场景,在卸载的时候也可以方便调用当前激活的场…

excel实用工具

持续更新… 文章目录 1. 快捷键1.1 求和 2. 命令2.1 查找 vloopup 1. 快捷键 1.1 求和 windows: alt mac : command shift T 2. 命令 2.1 查找 vloopup vlookup 四个入参数 要查找的内容 &#xff08;A2 6xx1&#xff09;查找的备选集 &#xff08;C2:C19&#xff09;…

Perl语言的数据库编程

Perl语言的数据库编程 近年来&#xff0c;随着互联网和数据技术的发展&#xff0c;数据库编程变得越来越重要。在众多编程语言中&#xff0c;Perl因其强大的文本处理能力而受到许多开发者的青睐。虽然Perl在网页开发和系统管理中起着重要的作用&#xff0c;但在数据库编程方面…

Redis集群部署详解:主从复制、Sentinel哨兵模式与Cluster集群的工作原理与配置

集群部署形式 1、主从复制1.1 工作机制1.2 配置实现1.3 优缺点1.4 部署形式1.5 主从复制优化 2、Sentinel 哨兵模式2.1 工作机制2.2 配置实现2.3 优缺点2.4 哨兵机制选举流程2.5 脑裂问题解决方案 3、Redis Cluster3.1 工作机制3.2 配置实现3.3 优缺点3.4 故障转移3.5 哈希槽为…

中国石油大学(华东)自动评教工具(涵盖爬虫的基础知识,适合练手)

我开发了一个用于自动评教的工具&#xff0c;大家可以试着用用&#xff0c;下面是链接。 https://github.com/restrain11/auto_teachingEvaluate 可以点个星吗&#xff0c;感谢&#xff01;&#x1fae1; 以下是我在开发过程中学到的知识 以及 碰到的部分问题 目录 动态爬虫和静…