elementui记录

青果小橙子

已于 2024-04-07 14:21:27 修改

阅读量279

点赞数

分类专栏：工作总结 vue 文章标签： elementui javascript 前端

于 2022-10-12 18:37:46 首次发布

本文链接：https://blog.csdn.net/weixin_46391404/article/details/127288307

版权

vue 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

工作总结

6 篇文章 0 订阅

订阅专栏

正则：

数字：/^[0-9]*$/
正整数：/^[0-9]*[1-9][0-9]*$/

两个数组，循环将一个数组有的数据插入到另外一个数组中

const _sortObj = JSON.parse(JSON.stringify(this.tableData));
	if (this.tableData?.length && this.multipleSelection?.length) {
			const a = this.multipleSelection.reduce((r, i) => {
				r[i] = i
					return r
			}, {})
			this.tableData.forEach(d => {
				d.exportFlag = a[d.id] ? 1 : 0
			})
		}

接口formdata型

let formData = new FormData()
formData.append('organId', id)

修改elementui table show-overflow-tooltip 样式
在这里插入图片描述

 .el-tooltip__popper {
  	max-width: 500px;
  }

f12打开后拖动屏幕

window.addEventListener('resize', () => {
        this.compuntFn()
      })

关闭eslint

/* eslint-disable */

在这里插入图片描述
json 替换值

this.params.quarter = v
this.$set(this.params, 'quarter', v)

路由传参

this.$router.push({ 
	name:"form",　　　　
	params:{id:item.id} 
})
this.$router.push({
	name:"/form/${item.id}", 
}) 
this.$router.push({ 
	name:"/form",　　　　 
	query:{id：item.id} 
}) 
获取 this.$route   this.$route.query.id

elementui input 清除、回车调用接口

<el-input placeholder='请输入姓名' v-model='nickName' style="width: 200px;margin-right: 10px;" clearable
	@clear="changeName" @keyup.enter.native="newdata">
</el-input>
changeName() {
	this.nickName = ''
	this.newdata()
},

在这里插入图片描述

<div  class="no-list-data">
	<img src="@/assets/list/nodata.png" alt="" />
	暂无数据
</div>
.no-list-data {
	padding-top: 30px;
	text-align: center;
	height: 220px;
	font-size: 13px;
	color: #333;
	
	img {
		display: block;
		width: 132px;
		height: 106px;
		margin: 0 auto 10px;
	}
	}

thoroughDeleteFn(row) {
      this.$confirm('确认要彻底删除该事务吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          thoroughDeleteAffair({
            affairQueryprocInsId: row.affairQueryprocInsId
          })
            .then((res) => {
              if (res.status === 0) {
                this.$message.success('删除事务数据成功');
                let totalPage = Math.ceil((this.total - 1) / this.pageSize)
                let currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = currentPage < 1 ? 1 : currentPage
                this.getData();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(() => {
              this.$message.error('删除事务数据失败');
            });
        })
        .catch(() => {});
},
  handlePreview(file) {
      if (!file) {
        this.$message.error('文件不存在');
        return false;
      }
      if (!file.fileUrl) {
        this.$message.error('上传时文件不能下载');
        return false;
      }
      const self = this;
      const a = file.fileUrl.substring(file.fileUrl.indexOf('/templates/'));
      file.fileUrl = baseURL + a;
      var url = file.fileUrl;
      var xhr = new XMLHttpRequest();
      xhr.open('get', url, true);
      xhr.responseType = 'blob'; // 返回类型blob
      // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
      xhr.onload = function() {
        console.log(this.status)
        // 请求完成
        if (this.status === 200) {
          // 返回200
          var blob = this.response;
          var href = window.URL.createObjectURL(blob); // 创建下载的链接
          // 判断是否是IE浏览器，是的话返回true
          if (window.navigator.msSaveBlob) {
            try {
              window.navigator.msSaveBlob(blob, file.name)
            } catch (e) {
              console.log(e);
            }
          } else {
            // 谷歌浏览器 创建a标签 添加download属性下载
            var downloadElement = document.createElement('a');
            downloadElement.href = href;
            // downloadElement.target = '_blank';
            downloadElement.download = file.name; // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          }
        } else {
          self.$message.error('文件不存在')
        }
      }
      xhr.send()
    }
  },
<el-table-column prop="deadlineTime" label="有效期截止时间" width="220" >
     <template slot-scope="scope">
       <el-popover trigger="manual" placement="top">
                 <upload class="upload-demo allWith" :limit="1" :disabledBtn="disabledBtn" :uploadType="uploadType"
                   @disableds="disableds" :fileList="fileList" :typeList="'zhengwen'" @fileLists="fileLists" />
                 <div slot="reference" class="name-wrapper">
                   <el-date-picker v-model="scope.row.deadlineTime" type="datetime" placeholder="选择有效期截止时间"
                     value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm">
                   </el-date-picker>
                 </div>
               </el-popover>
     </template>
   </el-table-column>
------------------------
表格删除
this.tableData = this.tableData.filter((v) => v.taskId !== row.taskId);        
this.total = this.total - 1;
-----------------------
 watch: {
    menuArr: {
      handler(val) {
        const a = getIconTitle(this.tabs, this.menuArr);
        this.tagName = a[0];
        this.icon = a[1];
        this.bgColor = a[2];
      },
      deep: true
    }
  },
dataZoom: [{
      type: 'inside',
      show: true,
      realtime: true,
      start: 50,
    }],
dataZoom: [
	//滑动条
	{
		xAxisIndex: 0, //这里是从X轴的0刻度开始
		show: true, //是否显示滑动条，不影响使用
		type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
		startValue: 0, // 从头开始。
		endValue: 15, // 一次性展示6个。
	},
	],

this.$notify.closeAll()   关闭所有右下角弹框


Layui 点击气泡

layer.tips(obj.data.retreatOperReason, $(index).parent());

页面缓存，tab切换时存在缓存，关闭tab后新开时页面重新刷新，产生缓存

<keep-alive :include="inCludePush">
 <router-view name="a" class="child-view"></router-view>
</keep-alive>
 inCludePush: []
 watch: {
    tabs: {
      handler: function(val, oldVal) {
        this.inCludePush = ['page', 'detail']
        val.map(d => {
          this.inCludePush.push(d.link.replace('/index/', ''))
        })
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },

// 播放音频
    renderAudio(src) {
      let audio = new Audio();
      let playPromise
      audio.src = src
      playPromise = audio.play();
      if (playPromise) {
        playPromise.then(() => {
          setTimeout(() => {
            audio.pause();
          }, 4500);
        }).catch(() => {
        })
      }
    },

form 表单校验

<el-form-item label='库存' prop='amount'>
	<el-input-number size='mini' v-model='form.amount' :step='1' :precision='0' :min='0'
		 style='width: 100%;' />
</el-form-item>
let amountInputNum = (rule, value, callback) => {
	if (this.form.amount >99999) {
		return callback(new Error('库存最大不能超过99999'))
	}  else if (this.form.amount == undefined) {
		return callback(new Error('请输入库存'))
	} else {
		callback();
	} 
};
rules:{
	amount: [{
		required: true,
		validator: amountInputNum,
		trigger: 'blur'
	}],
}

uniapp

电话校验

<el-col :span="24">
    <el-form-item
      label="联系电话"
      prop="contact"
      :rules="[
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码' },
      ]"
    >
      <el-input placeholder="请输入联系电话" v-model="form.contact" maxlength="11"></el-input>
    </el-form-item>
  </el-col>

      window.history.pushState('', '', '/personSet/opinions')

	if (this.conversionOfd == 'yes') {
		let flag = true;
		let listFile = JSON.parse(newValue)
		if (listFile && listFile.length > 0) {
			listFile.map((v) => {
			  if (v.name.substring(v.name.lastIndexOf('.')).toLowerCase() != '.ofd') {
			    flag = false;
			  }
			});
			if (!flag) {
			  this.$message.warning("文件未转成功");
			  return
			}
		}
	}

回到顶部

<div ref="scrollRef"></div>
	if (this.$refs.scrollRef) {
		this.$refs.scrollRef.wrap.scrollTop = 0;
	}

// 修改树形结构的键值 把items替换为children
		changeId(objAry, key, newkey) {
			if (objAry != null) {
				objAry.forEach((item) => {
					Object.assign(item, {
						[newkey]: item[key],
					});
					delete item[key];
					this.changeId(item.children, key, newkey);
				});
			}
			return objAry
		},

// 时分秒去掉0

// 时分秒去掉0
dislodgeZero(str) {
    let strArray = str.split(':');
    strArray = strArray.map(function(val) {
        if (val[0] == '0') {
            return val = parseInt(val.slice(1));
        }else{
            return parseInt(val);
        }
    })
    return strArray;
},

树结构转为列表结构

// 树结构转为列表结构
const walk = (tree, arr = []) => {
  tree.map((item) => {
    if (item.childrenList) {
      arr.push(...walk(item.childrenList));
      delete item.childrenList;
    }
    arr.push(item);
  });
  return arr;
};
this.dataClassification = walk(res.data.value)

图片在中间，缩小比例显示
在这里插入图片描述

<div style="text-align: center;margin-top: 46px;">
	<div class="imgAll" v-for="(i, index) in checkedList" :key="index">
	  <img :src="require('@/assets/rindex/' + i.num + '.png')"  alt="" class="imgSmall">
	</div>
</div>
.imgAll img {
	    transform: scale(0.9);
	    -ms-transform: scale(0.9);
	    -webkit-transform: scale(0.9);
	    -o-transform: scale(0.9);
	    width: auto;
	    height: auto;
	    max-width: 100%;
	    max-height: 100%;
	    -moz-transform: scale(0.9);
	}
	.imgAll {
	    width: 126px;
	    background: #ffffff;
			border-radius: 4px;
	    display: inline-block;
	    margin: 0 10px 0;
			padding-top: 8px;
	    height: 80px;
			vertical-align: top;
	}

json监听

	watch: {
			'formData.loginStyle': {
				handler(newVal, oldVal) {
					this.getImgUrl()
				}
			}
		},

动态设置样式

			v-bind:style="{ 'background-image': formData.loginStyle == 'three' && formData.backgroundImage && formData.backgroundImage == 'default' ? 'url(' + require('../../assets/rindex/'+ formData.loginStyle +'a.png') + ')' : formData.loginStyle == 'three' ? 'url(' + getImageUrl(formData.backgroundImage) + ')' : ''}">

动态设置本地图片

						<img :src="require('@/assets/rindex/' + i.loginStyle + '.png')" alt="" class="imgSmall">

table，自定义表头

:render-header="renderHeader3"
 renderHeader3(h) {
  return (
     `${this.timeDate[2]}`
   )
 },

序号

<el-table-column label="序号" width="70">
	<template slot-scope="scope">
		<span
			style="display: block;text-align: left;white-space: nowrap;">{{ ((currentPage-1)*pageSize+scope.$index+1) }}</span>
	</template>
</el-table-column>

青果小橙子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
elementui记录

thoroughDeleteFn(row) { this.$confirm('确认要彻底删除该事务吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) .then(() => { thoroughDeleteAffair({ affairQueryprocInsId: r
复制链接

扫一扫