❤Element的使用element

❤Element的使用

1、input输入框

禁止自动补全和下拉提示

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

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

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

文本类型输入框

类型type="textarea"

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

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

  • maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 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' }],
 }
⑤ 验证手机号
```js

  phone: [
          { 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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

2024全新Langchain大模型AI应用与多智能体实战开发

2024全新Langchain大模型AI应用与多智能体实战开发

2024全新Langchain大模型AI应用与多智能体实战开发 LangChain 就是一个 LLM 编程框架&#xff0c;你想开发一个基于 LLM 应用&#xff0c;需要什么组件它都有&#xff0c;直接使用就行&#xff1b;甚至针对常规的应用流程&#xff0c;它利用链(LangChain中Chain的由来)这个概念…
阅读更多...
[Linux]Crond任务调度以及at任务调度

[Linux]Crond任务调度以及at任务调度

一.crond任务定时调度 crond是反复检测执行的&#xff0c;一个任务结束后&#xff0c;在所规定的时间之后会再次执行 crontab 指令可以给系统分配定时任务 crontab -e 进入编辑页面&#xff0c;设定任务 crontab -l 查看已有定时任务 crontab -r 删除所有任务 编辑时&#xff…
阅读更多...
深度学习之基于MTCNN+Facenet的人脸识别身份认证系统

深度学习之基于MTCNN+Facenet的人脸识别身份认证系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着信息技术的快速发展&#xff0c;身份认证技术在日常生活和工作中的重要性日益凸显。传统的…
阅读更多...
【全部更新完毕】2024电工杯B题详细思路代码成品文章教学：大学生平衡膳食食谱的优化设计及评价

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

大学生平衡膳食食谱的优化设计及评价 摘要 大学阶段是学生获取知识和身体发育的关键时期&#xff0c;也是形成良好饮食习惯的重要阶段。然而&#xff0c;当前大学生中存在饮食结构不合理和不良饮食习惯的问题&#xff0c;主要表现为不吃早餐或早餐吃得马虎&#xff0c;经常食用…
阅读更多...
Python文件和数据格式化-课后作业[python123题库]

Python文件和数据格式化-课后作业[python123题库]

文件和数据格式化-课后作业 一、单项选择题 1、文件句柄f&#xff0c;以下是f.seek(0)作用的是&#xff1a;‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪…
阅读更多...
如何从http免费升级到https

如何从http免费升级到https

使用https协议开头是为了在用户访问网站时提供更安全的网络环境。相比http&#xff0c;使用https有数据加密、身份验证、保护隐私、搜索引擎优化等优势。一般获取https证书&#xff0c;则需要支付费用给证书颁发机构&#xff08;CA&#xff09;。还有一些免费的证书证书颁发机构…
阅读更多...
嵌入式单片机启动地址映射关系

嵌入式单片机启动地址映射关系

一、内核只会从0地址启动 1.0地址第一个字是sp栈指针，第二个字是Reset_Handler入口，参考图1中启动代码中的中断向量表。具体使用流程参考图2（参考自野火） 图1 图2 2.0地址映射以后，软件上使用0地址访问的空间是映射到的器件的空间 3.0地址映射只会影响单个器件上的地址，…
阅读更多...
知识图谱数据预处理笔记

知识图谱数据预处理笔记

知识图谱数据预处理笔记 0. 引言1. 笔记1-1. \的转义1-2. 特殊符号的清理1-3. 检查结尾是否正常1-4. 检查<>是否存在1-5. 两端空格的清理1-6. 检查object内容长时是否以<开始 0. 引言 最近学习知识图谱&#xff0c;发现数据有很多问题&#xff0c;这篇笔记记录遇到的…
阅读更多...
数据可视化

数据可视化

目录 数据可视化： 常见的数据可视化库： Echarts 使用五步曲 Echarts 相关配置 数据可视化： 应对现在数据可视化趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出 主要目的：借助于…
阅读更多...
小红书-社区搜索部 (NLP、CV算法实习生) 一面面经

小红书-社区搜索部 (NLP、CV算法实习生) 一面面经

&#x1f604; 整个流程按如下问题展开&#xff0c;用时60min左右面试官人挺好&#xff0c;前半部分问问题&#xff0c;后半部分coding一道题。 各位有什么问题可以直接评论区留言&#xff0c;24小时内必回信息&#xff0c;放心~ 文章目录 1、自我介绍2、介绍下项目&#xff…
阅读更多...
Node.js知识点以及案例总结

Node.js知识点以及案例总结

思考&#xff1a;为什么JavaScript可以在浏览器中被执行 每个浏览器都有JS解析引擎&#xff0c;不同的浏览器使用不同的JavaScript解析引擎&#xff0c;待执行的js代码会在js解析引擎下执行 为什么JavaScript可以操作DOM和BOM 每个浏览器都内置了DOM、BOM这样的API函数&#xf…
阅读更多...
好用的window粘贴板

好用的window粘贴板

可以设置指定的快捷键&#xff0c;在需要使用最近复制的记录时快速的复用 -> Ditto。 选择Download即可 地址&#xff1a;Ditto clipboard manager (sourceforge.io)https://ditto-cp.sourceforge.io/
阅读更多...
SwiftUI中的组合动画（Simultaneous, Sequenced, Exclusive）

SwiftUI中的组合动画（Simultaneous, Sequenced, Exclusive）

了解了常见的几种手势后&#xff0c;接下来我们了解一下组合手势的操作&#xff0c;当一个视图存在多个手势的时候&#xff0c;为了避免手势冲突&#xff0c;SwiftUI提供了自定义手势的方法&#xff0c;比如同时进行&#xff0c;顺序进行等等。 以下是一些常见的多种手势组合使…
阅读更多...
集创北方ICN6211 MIPIDSI桥接到RGB，支持RGB565/RGB888/RGB666

集创北方ICN6211 MIPIDSI桥接到RGB，支持RGB565/RGB888/RGB666

ICN6211描述&#xff1a; ICN6211是一个桥接芯片&#xff0c;它接收MIPIDSI输入并发送RGB输出。MIPIDSI最多支持4个车道&#xff0c;每个车道的最大运行频率为1Gbps&#xff1b;总最大输入带宽为4Gbps&#xff1b;并且还支持MIPI定义的ULPS&#xff08;超低功耗状态&#xff0…
阅读更多...
计算机网络基础 - 计算机网络和因特网(1)

计算机网络基础 - 计算机网络和因特网(1)

计算机网络基础 计算机网络和因特网什么是 Internet?具体构造的的角度服务角度网络结构 网络边缘网络核心电路交换分组交换概述排队时延和分组丢失转发表和路由选择协议按照有无网络层的连接 分组交换 VS 电路交换 接入网DSL 因特网接入电缆因特网接入光纤到户 FTTH无线接入网…
阅读更多...
实现复杂树结构返回(不含子树), 并且结点间建立关联

实现复杂树结构返回(不含子树), 并且结点间建立关联

&#x1f4a1; 一句话结&#xff1a; 实现传感器和深度及采集的数值动态对应&#xff0c;将不规则的数据转变成固定列头的一行行数据。 &#x1f511; 关键信息点&#xff1a; 通过传感器编号和深度将传感器对应的数值与时间建立关联。使用SpringBootMyBatis框架实现动态查询…
阅读更多...
Nginx实现负载均衡与故障检查自动切换

Nginx实现负载均衡与故障检查自动切换

创作灵感来源于个人项目的一个稳定性规划&#xff0c;单节点的项目稳定性方面可能有很大的缺漏&#xff0c;因此需要升级为多节点&#xff0c;保证服务故障后&#xff0c;依然有其他服务可用&#xff0c;不会给前端用户造成影响。 &#xff08;前面讲选型&#xff0c;想直接看…
阅读更多...
亚马逊自养号测评环境搭建技巧：打造防关联底层环境的关键步骤

亚马逊自养号测评环境搭建技巧：打造防关联底层环境的关键步骤

今天我们要聊的是完全由人工操作的自养号方法&#xff0c;相信有过相关经验的朋友们都清楚&#xff0c;在实现自养号的过程中&#xff0c;所使用的 IP 和浏览器究竟有哪些选择&#xff0c;以及可能会遇到哪些问题。 首先&#xff0c;我们来看看市场上现有的 IP 类型以及可能出现…
阅读更多...
全网最全网络基础思维导图合集（38张）

全网最全网络基础思维导图合集（38张）

计算机网络基础知识点多且杂&#xff0c;想要系统地学习&#xff0c;思维导图肯定是必不可少的。 今天整理了38张思维导图&#xff0c;帮助你轻松理清思路&#xff0c;快速掌握关键内容。建议你收藏起来慢慢看&#xff0c;在看过之后最好能重新动手画一画&#xff0c;让计算机…
阅读更多...
如何获取一个城市或者一个区域的玫瑰风向图？

如何获取一个城市或者一个区域的玫瑰风向图？

玫瑰风向图是一种直观展示风向和风速的图形工具&#xff0c;它在气象学、城市规划、农业等领域都有广泛的应用。那么&#xff0c;如何获取某个城市或某个区域的玫瑰风向图呢&#xff1f; 首先&#xff0c;我们可以借助互联网资源获取玫瑰风向图。现代网络技术发达&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023