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

news2025/1/17 18:16:44

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

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-input
    type="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.coloradmin.cn/o/2278114.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图论1-问题 C: 算法7-6:图的遍历——广度优先搜索

题目描述 广度优先搜索遍历类似于树的按层次遍历的过程。其过程为&#xff1a;假设从图中的某顶点v出发&#xff0c;在访问了v之后依次访问v的各个未曾被访问过的邻接点&#xff0c;然后分别从这些邻接点出发依次访问它们的邻接点&#xff0c;并使“先被访问的顶点的邻接点”先…

基于vue框架的的校园心理咨询室系统63w37(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,咨询师,文章类型,心理文章,在线咨询,典型案例,线下预约,取消预约 开题报告内容 基于Vue框架的校园心理咨询室系统开题报告 一、研究背景与意义 随着社会的快速发展和竞争的加剧&#xff0c;校园中的学生面临着越来越多的心理压力…

Spring 6 第1章——概述

一.Spring是什么 Spring是一款主流的Java EE轻量级&#xff08;体积小、不需要依赖其它组件&#xff09;开源框架Spring的目的是用于简化Java企业级应用的开发难度和开发周期Spring的用途不仅限于服务端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任…

基于vite+vue3+mapbox-gl从零搭建一个项目

下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤&#xff0c;包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目 首先&#xff0c;使用 Vite 快速创建一个 Vue 3 项目&#xff1a; npm create vuelatest vue3-mapboxgl --template vue cd vue3-mapbo…

Kibana:ES|QL 编辑器简介

作者&#xff1a;来自 Elastic drewdaemon ES|QL 很重要 &#x1f4aa; 正如你可能已经听说的那样&#xff0c;ES|QL 是 Elastic 的新查询语言。我们对 ES|QL 寄予厚望。它已经很出色了&#xff0c;但随着时间的推移&#xff0c;它将成为与 Elasticsearch 中的数据交互的最强大…

使用葡萄城+vue实现Excel

最终实现效果如下 包含增加复选框 设置公式 设置背景颜色等&#xff0c;代码实在太多 有需要可留言 第一步&#xff1a;创建表头 请使用官网提供的网址&#xff1a;在线 Excel 编辑器 | SpreadJS 在线表格编辑器 1.点击下方号&#xff0c;创建一个新的sheet页 默认新创建的she…

[系统安全] 六十一.恶意软件分析 (12)LLM赋能Lark工具提取XLM代码的抽象语法树(初探)

您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列。因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全、逆向分析和恶意代码检测,“系统安全”系列文章会更加聚焦,更加系…

Linux浅谈——管道、网络配置和客户端软件的使用

目录 一、管道 1、管道符 2、过滤功能 3、特殊功能 4、扩展处理 5、xargs命令扩展 二、网络配置 1、ifconfig查看网络信息 2、配置文件详解 网卡配置文件位置 3、systemctl查看网卡状态 4、systemctl启动/重启/停止网卡 三、客户端软件 1、什么是SSH 2、常用SSH终…

Oracle 深入学习 Part12: Managing Indexes (管理索引)

索引的分类 逻辑分类&#xff1a; 单列和多列&#xff1a; 单列索引&#xff08;single column&#xff09;&#xff1a;对单列数据建立索引。 复合索引&#xff08;concatenated&#xff09;&#xff1a;对多列数据建立索引。 唯一性&#xff1a; 唯一性&#xff08;unique…

【网络安全】FortiOS Authentication bypass in Node.js websocket module

文章目录 漏洞说明严重等级影响的产品和解决措施推荐阅读 漏洞说明 FortiOS存在一个使用替代路径或者信道进行身份验证绕过漏洞&#xff0c;可能允许未经身份验证的远程攻击者透过向Node.js WebSocket模块发送特别设计的请求&#xff0c;可能获得超级管理员权限。 Fortinet 官…

GMM高斯混合聚类算法(Matlab)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GMM高斯混合聚类算法 matlab2023b语言&#xff0c;一键出图&#xff0c;直接运行 1.代码注释清晰&#xff0c;自行解读容易。 2…输出图例如图所示包括&#xff1a;聚类图(聚类结果图)&#xff0c;协方差矩阵类型…

Kutools for Excel 简体中文版 - 官方正版授权

Kutools for Excel 是一款超棒的 Excel 插件&#xff0c;就像给你的 Excel 加了个超能助手。它有 300 多种实用功能&#xff0c;现在还有 AI 帮忙&#xff0c;能把复杂的任务变简单&#xff0c;重复的事儿也能自动搞定&#xff0c;不管是新手还是老手都能用得顺手。有了它&…

计算机数据提取与固定

1.计算机数据的提取与固定 1.课程介绍 电子数据提取与固定、电子数据恢复、电子数据分析。 2.计算机数据提取与固定 数字化时代&#xff0c;计算机和电子设备承载海量素具&#xff0c;这些数据在各类案件调查、事故处理以及合规审计场景扮演关键角色。 3.操作系统定义 操…

VSCode 使用默认profile打开文件

VSCode 本身的定位就是文本编辑器&#xff0c;只是通过各种插件才实现了 IDE 的功能。 如果想要把 VSCode 当作 IDE 和文本编辑器同时使用&#xff0c;就需要注意 profile 切换的问题。 profile 是 VSCode 的一个功能&#xff0c;可以通过多首选项管理不同的环境&#xff0c;比…

Profibus DP转Modbus TCP协议转换网关模块功能详解

Profibus DP 和 Modbus TCP 是两种不同的工业现场总线协议&#xff0c;Profibus DP 常用于制造业自动化领域&#xff0c;而 Modbus TCP 则在工业自动化和楼宇自动化等领域广泛应用。实现 Profibus DP 转 Modbus TCP 功能&#xff0c;通常需要特定的网关设备&#xff0c;以下为你…

镭速大文件传输视频文件预览实现原理

镭速可以支持视频预览&#xff0c;在测试过程中需要大量不同格式的视频&#xff0c;如果直接去找各种格式的视频不太现实&#xff0c;所以就会用到一个视频格式转换的工具ffmpeg&#xff0c;本文将介绍ffmpeg的基本使用方法。FFmpeg 是一个免费开源的音视频处理工具&#xff0c…

keepalived双机热备(LVS+keepalived)实验笔记

目录 前提准备&#xff1a; keepalived1&#xff1a; keepalived2&#xff1a; web1&#xff1a; web2&#xff1a; keepalived介绍 功能特点 工作原理 应用场景 前提准备&#xff1a; 准备4台centos&#xff0c;其中两台为keepalived&#xff0c;两台为webkeepalive…

MySQL(高级特性篇) 02 章——MySQL的数据目录

一、MySQL8的主要目录结构 命令&#xff1a; find / -name mysql 安装好MySQL8之后&#xff0c;我们查看如下的目录结构 &#xff08;1&#xff09;数据库文件的存放路径 MySQL数据库文件的存放路径&#xff1a;/var/lib/mysql/MySQL服务器程序在启动时会到文件系统的某个目…

【C++篇】红黑树的实现

目录 前言&#xff1a; 一&#xff0c;红黑树的概念 1.1&#xff0c;红黑树的规则 1.2&#xff0c;红黑树的最长路径 1.3&#xff0c;红黑树的效率分析 二&#xff0c;红黑树的实现 2.1&#xff0c;红黑树的结构 2.2&#xff0c;红黑树的插入 2.2.1&#xff0c;大致过程…

UDP报文格式

UDP是传输层的一个重要协议&#xff0c;他的特性有面向数据报、无连接、不可靠传输、全双工。 下面是UDP报文格式&#xff1a; 1&#xff0c;报头 UDP的报头长度位8个字节&#xff0c;包含源端口、目的端口、长度和校验和&#xff0c;其中每个属性均为两个字节。报头格式为二…