❤Element的使用element

❤Element的使用

1、input输入框

禁止自动补全和下拉提示

input 输入框在输入后浏览器会记录用户输入的值,在下次输入的时候会将记录的值提示在输入框的下面,当输入框是密码的时候,这样可以看见上次输入的密码,这样用户体验不好,input标签有个属性可以禁止这种操作:

<input type="number" autocomplete="off" >

这样用户的输入的值就不会被浏览器记录,可以达到较好的效果
———————————————————————————————————————————

文本类型输入框

类型type="textarea"

  • 设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize 还可以设定为一个对象,指定最小行数和最大行数。

  • 通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸

  • maxlengthminlength 是原生属性,用来限制输入框的字符长度,其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 texttextarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计

  • 想要统计字数:利用show-word-limit 达到限制文字的效果

<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"> </el-input>

3、下拉框

change事件取key和value值
结构部分:<el-form-item label="类型" prop="groupCode"><el-select v-model="form.groupCode" value-key="value" placeholder="请选择班组" 	@change="groupChanged" size="small"><el-option v-for="item in groupTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select><el-input v-model="form.groupName" v-show="false"></el-input>
</el-form-item>

1、普通写法,写进提交

let arr=[];if(this.form.groupCode!=null){this.groupTypeList.map((item)=>{if(item.id==this.form.groupCode){ // arr.push(item)this.form.groupName=item.name;}});}

2、ES6 find()函数

  • ES6 find()函数

在ES6中,可以使用数组的find()函数来查找符合条件的第一个元素。该函数接受一个回调函数作为参数,该回调函数会被传入数组中的每一个元素,当回调函数返回true时,find()函数会返回该元素,否则继续查找直到数组结束。如果数组中没有符合条件的元素,则返回undefined。

举个例子,假设我们有一个数组arr,我们想要查找其中第一个大于10的元素,可以使用以下代码:

const arr = [5, 8, 12, 15, 20];const result = arr.find((element) => {return element > 10;
});
console.log(result); // 输出12

使用数组的find函数来查找第一个大于10的元素。

  • 回调函数 传 element参数代表数组中的每一个元素,大于10时,回调函数返回true,find函数返回该元素。

  • find函数返回了数组中第一个大于10的元素12

所以find()我们可以写成:

let obj = {};
obj = this.groupTypeList.find(item => {return item.id === e;
});
this.form.groupName = obj.name;

4、Table表格

1、表格基础属性

(1) 表格赋值数据
data<el-table v-loading="loading" :data="dataList" border></el-table>
dataList: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

增加边框样式

border:  仅仅是侧边栏的边框<el-table v-loading="loading" :data="dataList" border>

2、表头样式处理

① 表头居中
align="center"// 添加地方
<el-table-column label="序号" align="center" prop="id"/>

在这里插入图片描述
在这里插入图片描述

② 显示缩略文字
width="50" :show-overflow-tooltip="true"// 添加地方
<el-table-column label="序号" width="50" align="center" prop="id" :show-overflow-tooltip="true"/>

在这里插入图片描述

方式一:使用方式一

<el-table :header-cell-style="{backgroundColor:'#eee'}"></el-table>

方式二:使用方式二

3、表格每一行显示居于顶部

.el-table--border /deep/ .el-table__cell {font-size: 12px;vertical-align: top;}

4、鼠标滑动效果

🍓鼠标滑动效果

.el-table  ::v-deep .el-table__body tr:hover > td {background-color: #fff !important;} 

5、表格高度

.el-table .cell.el-tooltip{
white-space: nowrap;min-width: 50px;height: 100px;
}

6、Table表格跨页多选回显清除选中数据问题

1、❤ 实现
表格组件:<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange1" ref="multipleTable"  row-key='id'>
</el-table>

❤ 方法1

  • 利用 reserve-selection与row-key结合

    ① 在表格加上属性 row-key='id'或者加上 :row-key="(row) => { return row.id }" row-key绑定每行数据的唯一标识

    ② 在多选的column标签加上 :reserve-selection=“true” 开启

    ③ 表格的多选函数上写上方法toggleRowSelection(row,true)

    sedata.forEach(key => {tabledata.forEach(row => {if (row.id == key) {setTimeout(() => {_this.$refs.multipleTable.toggleRowSelection(row,true)}, 300);}})
    });
    

❤ 方法2 自己手写一个循环判断

2、可能遇到的问题
❤无法清空table多选框的选中状态
当前页面清空
this.$refs.multipleTable.clearSelection();
在父组件清空:
this.$refs.issueList.$refs.multipleTable.clearSelection();

[Vue warn]: Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘toggleRowSelection

  • 原因:【由于DOM并没有更新完引起的】

  • 解决方法:

    [1]
    this.$nextTick(() => {}) ;[2]定时器【我用的这个】
    setTimeout(() => {},300); 
遇到表格无法跨页回显【特殊】

找了几遍没发现错误,最后怀疑是table并非一次全部选中

❤解决方法:
这个时候检查一下,在分页时候是否将分页选中放到了我们每次点击分页以后查询表格的接口之中

3、进一步衍生

4、总结

🍓

5、上传图片功能

element上传文档

https://element.eleme.cn/#/zh-CN/component/upload

// 结构部分<el-form-item label="用户照片" prop="picImg"><el-upload class="avatar-uploader" :action="imgAction" :show-file-list="false":http-request="uploadPicImg" name="img" :on-success="handleSuccess" :before-upload="beforeUpload"><img v-if="picImg" :src="picImg" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i><!--   <img v-if="form.picImg" :src="form.picImg" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i> --></el-upload>
</el-form-item>//数据imgAction: null, // 图片上传地址:show-file-list="false" //不显示长传的那个进度//上传前监测图片格式和参数方法
//参数是上传的文件,若返回false,或返回Primary且被reject,则停止上传beforeUpload(file) {const isJPG = file.type === 'image/jpeg';const isGIF = file.type === 'image/gif';const isPNG = file.type === 'image/png';const isBMP = file.type === 'image/bmp';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG && !isGIF && !isPNG && !isBMP) {this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');}if (!isLt2M) {this.$message.error('上传图片大小不能超过 2MB!');}return (isJPG || isBMP || isGIF || isPNG) && isLt2M;},// 上传方法 ---调用咋们的接口uploadPicImg(query) {let _this = this;let param = new FormData();param.append('img', query.file);uploadImg(param).then(response => {if (response.code == 200) {// this.dialogImageUrl= response.data;_this.picImg = response.data;_this.form.picImg = response.data; //将返回的文件储存路径赋值picture字段// this.form.$forceUpdate();console.log(_this.form.picImg);Notification({title: response.msg,type: 'success'});}})
},//上传图片成功时候使用的方法--进行赋值
handleSuccess(res, file) {let _this = this;console.log(res, file, '上传部分');_this.picImg = URL.createObjectURL(file.raw);_this.form.picImg = URL.createObjectURL(file.raw);// console.log(this.imageUrl);_this.$forceUpdate();_this.$message({type: 'info',message: '图片上传成功',duration: 6000});
},

6、表单验证

(1)使用

(1) form表单绑定必须有这三个 : 表单绑定数据、规则、要验证规则的 prop属性
在这里插入图片描述
(2)规则
在这里插入图片描述
两种规则:【注意属性名对应上】 (上面prop是name,下面rules里面也是name)

① 静态的 类似输入

② 动态的 类似下拉

rules: {//静态的 类似输入name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },],//动态的 类似下拉region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],}

(2)验证方式

普通验证

① input输入验证
  • 表单
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
</el-form>
  • 验证规则

可以添加验证长度的 最大最小值以及长度提示

放置位置

image.png

验证规则rules

rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],}
② 普通选择类型验证
// 表单里面
<el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select>
</el-form-item>// 验证规则rules
rules: {region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],}
③ 普通时间类型验证
// 表单里面
<el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item>// 验证规则rules
rules: {date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],}
④ 普通单选多选类型验证
// 表单里面
<el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group>
</el-form-item>// 验证规则rules
rules: {
type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],
resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],}
⑤ 验证手机号
```jsphone: [{ required: true, message: '电话不能为空', trigger: 'blur' },{ validator: validatePhone, trigger: 'blur'}],data下:
var validatePhone= (rule, value, callback) =>{if (value === '') {callback(new Error('手机号不能为空'));} else {const reg = /^1[3456789]\d{9}$/if (reg.test(value)) {callback();} else {return callback(new Error('请输入正确的手机号'));}}
};

静态和动态验证

- 静态校验直接写组件上时:
 <el-form-item label="活动形式" prop="desc"><el-input type="input" v-model="ruleForm.desc":rules="{required: true, message: '活动形式不能为空', trigger: 'blur' }"></el-input>
</el-form-item>
- 动态校验直接写组件上时:
 <el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域" :rules="{required: true, message: '活动形式不能为空', trigger: 'change' }"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>

动态校验字段是否required必需

image.png

image.png

清除表单验证

① 表单在进入的时候重置

_this.$refs['form'].resetFields();

② 表单验证在进入的时候重置

清空表单验证:
this.$refs[formName].clearValidate(); // 仅清除验证

③ 定向清除表单某个属性的单个验证

应用场景
对表单项进行操作的时候,可能会有联动的两个或则多个表单项,定向清除表单某个属性的验证

<el-form-item ref="picImgValidate" prop="picImg"></el-form-item>if (this.form.picImg != undefined) {this.$refs.form.clearValidate(['bbb']);  //清除单个this.$refs.form.clearValidate(['deptId','name']) //清除多个}

隐藏必填字段的标签旁边的红色星号

hide-required-asterisk 是否隐藏必填字段的标签旁边的红色星号

使用:hide-required-asterisk=‘true’

 let numin = 0;for(var key in  obj){if(numin==0){_this.$message.error(obj[key][0].message);return false}numin++}

❤ 表单使用遇到问题

1、报错:[Vue warn]: Injection “select“ not found

在这里插入图片描述

原因分析:
el-select要包裹el-option

解决方法:
el-option外面包裹一层el-select

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/15548.shtml

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

相关文章

python使用jsonpath来查找key并赋值

目录 一、引言 二、JsonPath简介 三、Python中的JsonPath库 四、使用JsonPath查找JSON Key 五、使用JsonPath赋值JSON Key 六、高级用法 七、结论 一、引言 在数据驱动的现代应用中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;已成为一种广泛使…

Java 微信小程序登录(openId方式)

1 需求 在开发微信小程序项目时&#xff0c;登录采用的是openId方式&#xff0c;这是一种用户无感的登录方式&#xff0c;用户点开微信小程序时&#xff0c;去调用后端的登录接口。 核心代码 Slf4j Component public class WeChatUtil {private static final String …

基于大数据的支付风险智能防控技术规范

随着大数据、移动互联、人工智能、生物特征识别等技术的快速发展&#xff0c;支付方式正在发生着巨大而深刻的变革&#xff0c;新技术在丰富支付手段、提高支付效率的同时&#xff0c;带来了新的隐患&#xff0c;也对从业机构的风险防控能力提出了更高的要求。 传统的风控技术…

springboot利用Spring的自动装配,策略模式提高系统接口扩展能力,

前段时间有个简单的短信登录功能&#xff0c;需要集成短信服务实现短信发送&#xff0c;一开始用的阿里云&#xff0c;后面领导又说用天翼云&#xff0c;还说阿里云的保留&#xff0c;以后说不准还会集成其他的服务商&#xff0c;于是用nacos的热更新来解决动态切换&#xff0c…

unity InputField的问题

unity 的inputField当focus时&#xff0c;弹起来的键盘样式会携带有一个输入显示。如果想自定义输入框的样式&#xff0c;就需要关闭inputfield的activateInput就是激发输入框的显示然后当inputfield被点击的时候&#xff0c;调用android原生键盘&#xff0c;并设置内容回调。我…

01-02.Vue的常用指令(二)

01-02.Vue的常用指令&#xff08;二&#xff09; 前言v-model&#xff1a;双向数据绑定v-model举例&#xff1a;实现简易计算器Vue中通过属性绑定为元素设置class 类样式引入方式一&#xff1a;数组写法二&#xff1a;在数组中使用三元表达式写法三&#xff1a;在数组中使用 对…

【全部更新完毕】2024电工杯B题详细思路代码成品文章教学:大学生平衡膳食食谱的优化设计及评价

大学生平衡膳食食谱的优化设计及评价 摘要 大学阶段是学生获取知识和身体发育的关键时期&#xff0c;也是形成良好饮食习惯的重要阶段。然而&#xff0c;当前大学生中存在饮食结构不合理和不良饮食习惯的问题&#xff0c;主要表现为不吃早餐或早餐吃得马虎&#xff0c;经常食用…

CentOS 常见命令详解

CentOS 是一种基于 Red Hat Enterprise Linux (RHEL) 的免费开源操作系统&#xff0c;以其稳定性和高效性广泛应用于服务器和企业环境中。对于系统管理员和开发人员来说&#xff0c;掌握 CentOS 的常见命令是日常工作中的必备技能。本文将详细介绍一些在 CentOS 上常用的命令&a…

算法提高之谜一样的牛

算法提高之谜一样的牛 核心思想&#xff1a;树状数组 初始化树状数组为1 表示所有高度都没有用过从后往前遍历h数组 分析身高 取当前h&#xff0c;即前面有h个比它高的 所以它是第h1个数求当前身高中 第h1个数 用二分mid求sum找到第k个数当前身高用过之后减1 #include <i…

高通Android 12/13冻结应用

最近开发SDK遇到冻结应用需求&#xff0c;于是简单记录下。总体而言比较简单&#xff0c;调用系统接口实现此功能。 涉及类与方法 IPackageManager .aidl # * As per {link android.content.pm.PackageManager#setApplicationEnabledSetting}.*/UnsupportedAppUsagevoid setA…

宝塔面板修改端口后无法登入

今天通过宝塔面板登录腾讯云主机&#xff0c;看到下面的提醒&#xff0c;顺便点进去随便改了个端口 本以为改端口是很简单事情&#xff0c;结果我改完之后面板立马登不上了&#xff0c;接下来我改了登录地址和端口也不行&#xff0c;我以为是防火墙的问题&#xff0c;增加了防火…

SpringBoot基于函数替换的热重载

背景 SpringBoot项目每次启动都很慢&#xff0c;有时候调试仅仅是改一点点东西&#xff0c;就要重启工作效率太低&#xff0c;希望能修改完代码&#xff0c;执行快捷键后就把该类的修改生效。&#xff08;仅限于Bean的修改生效&#xff09; 原理 SpringBoot的逻辑基本都是集…

ViT:1 从DETR说起

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提供了大模型领域最新技…

Pycharm在下载安装第三方库时速度慢或超时问题 / 切换国内镜像地址

pycharm下载第三方库速度极慢&#xff0c;搜索了一下&#xff0c;发现方法非常乱&#xff0c;稍作整理。这个问题一般都会出现&#xff0c;在我们开发中遇到的常见问题&#xff0c;根据以下解决方法&#xff0c;基本可以解决&#xff0c;但是不能100%保证 Installing packages …

打造一个增强版Kimi:可以生成图片、PPT、PDF文档、数据分析等

Kimi虽然在国内AI大模型中表现不错&#xff0c;但是和ChatGPT还是差不少功能。现在有一个很简单的方法&#xff0c;把kimi功能增强&#xff0c;使用效果大大改善&#xff0c;比如生成图片&#xff1a; 具体方法如下&#xff1a; 打开coze网站&#xff1a;https://www.coze.cn/…

Elementui里使用el-date-picker来选取指定时间段(时间段不超过31天)

需求描述&#xff1a; 1.禁止选择当前日期之后的所有日期2.选择的时间范围小于等于31天&#xff0c;其他日期禁用<el-date-picker v-model"historySubmitModel.historyDateTime" type"daterange" range-separator"- " start-placeholder"…

鸿蒙应用开发系列 篇四:鸿蒙系统应用开发基础

文章目录 系列文章概述ArkTS应用(Stage模型)示例应用示例代码使用模拟器运行应用使用真机运行应用应用程序包共享包应用配置文件(Stage模型)资源目录示例系列文章 鸿蒙应用开发系列 篇一:鸿蒙系统概述 鸿蒙应用开发系列 篇二:鸿蒙系统开发工具与环境

【c++基础】昆虫繁殖

说明 科学家在热带森林中发现了一种特殊的昆虫&#xff0c;这种昆虫的繁殖能力很强。每对成虫每过x个月产y对卵&#xff0c;每对卵要过两个月长成成虫。假设每个成虫不死&#xff0c;第一个月只有一对成虫&#xff0c;且卵长成成虫后的第一个月不产卵(过X个月产卵)&#xff0c…

C++容器之位集(std::bitset)

目录 1 概述2 使用实例3 接口使用3.1 constructor3.2 count_and_size3.3 test3.4 any3.5 none3.6 all3.7 set3.8 reset3.9 filp3.10 to_string3.11 to_ulong3.12 to_ullong3.13 operators1 概述 位集存储位(只有两个可能值的元素:0或1,true或false,…)。   该类模拟bool…

推荐一款自助分析的财务分析软件:奥威BI软件

奥威BI软件是一款支持多维度动态自助分析的软件&#xff0c;预设了智能财务分析方案&#xff0c;提供内存行列计算模型解决财务指标计算难题&#xff0c;界面简洁&#xff0c;以点击、拖曳操作为主&#xff0c;十分适合没有IT背景的财务人做财务分析。因此也经常有人说奥威BI软…