前端vue elementui常用功能

编程干饭王

已于 2025-04-17 17:29:03 修改

阅读量191

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue.js elementui

于 2025-04-16 11:29:51 首次发布

本文链接：https://blog.csdn.net/qq_53030245/article/details/147272803

rules规则校验清除

this.$refs.ruleForm.resetFields();

ruleForm为中的ref属性值：<el-form ref="ruleForm">

前端缓存用法

字段存取

//方法一
window.localStorage.setItem("name","张三");//放入缓存
let name = window.localStorage.getItem("name");//取出缓存

//方法二
sessionStorage.setItem("name","张三");//放入缓存
let name = sessionStorage.getItem("name");//取出缓存

json存取

//方法一
window.localStorage.setItem("userInfo", JSON.stringify(userInfo));//放入缓存（json转成字符串）
let userInfo = JSON.parse(window.localStorage.getItem("userInfo"))//取出缓存（字符串转json）

//方法二
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));//放入缓存（json转成字符串）
let userInfo = JSON.parse(sessionStorage.getItem("userInfo"))//取出缓存（字符串转json）

文件显示时名字过长隐藏，鼠标放上去显示全部，点击可导出

<el-upload class="upload-demo" action  multiple :file-list="contractList" disabled> 
    <template #file="{file}">
      <div>
        <el-tooltip :content="file.name" placement="top">
          <el-button type="text" class="file-name" @click="handlePreview(file)">{{ file.name }}</el-button>
        </el-tooltip>
      </div>
    </template>
</el-upload>

//预览文件（导出）
handlePreview (file) {
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = file.url;
    window.open(link.href,'_blank');
},