el-tree 自动展开

el-tree 自动展开

需求：通过输入来筛选树中的数据，由于数据是通过懒加载得到的。因此需要手动的点击每个节点来展开它们。然而，如何才能不通过手动点击来展开所有节点呢？

1. 利用默认展开节点属性 :default-expanded-keys="expandList"
2. 把当前分类节点数据加入默认展开的列表中。
3. 然后遍历当前全部节点，并把所有节点的expanded属性手动置为true.
4. 通过默认的节点筛选函数进行筛选。

searchName() {
    this.expandList = [1];
    this.loading = true;
    if (this.corpId) {
        this.getClassify({ corpId: this.corpId })
            .then(classify => {
            classify.forEach(item => {
                this.expandList.push(item.id);
            });
        })
            .catch(() => {
            this.$message.warning('搜索不可用');
        });
    } else {
        this.$message.warning(
            '获取组织当前用户组织失败，请刷新页面后重试',
        );
    }

    for (
        var i = 0;
        // eslint-disable-next-line no-underscore-dangle
        i < this.$refs.tree.store._getAllNodes().length;
        i++
    ) {
        // eslint-disable-next-line no-underscore-dangle
        this.$refs.tree.store._getAllNodes()[
            i
        ].expanded = true;
    }

    let that = this;
    setTimeout(() => {
        that.$refs.tree.filter(this.filterText);
        this.loading = false;
    }, 3000);
},

自定义请求上传文件

<el-upload
ref="uploadMutiple"
:auto-upload="false"
action="Fake Action"
:on-success="allHandleSuccess"
:on-change="handleChange"
:file-list="fileList"
:http-request="allUpload"
:before-upload="before_upload"
multiple
>选取文件</el-upload>

<el-button type="primary" size="small" @click="submitUpload">
  
<el-button type="primary" size="small" @click="submitUpload">上传</el-button>

首先关闭自动上传，并给随便给action赋值一个字符串。（action是必填属性）

   :auto-upload="false"
   action="Fake Action"

通过:on-change钩子函数，拿到文件列表：

handleChange(file, fileList) {
  this.fileList = fileList;
},

一般情况下，我们在submitUpload（）的点击事件中去触发上传：

submitUpload() {
this.$refs.uploadMutiple.submit();
}

之后组件会触发:http-request钩子行数。需要注意的是，这里你的fileList中有几个文件，就会执行几次:http-request钩子函数。这意味着，如果你把上传请求写在:http-request钩子函数中，就会造成重复不必要的请求。直接在submitUpload()中写post请求即可。只需要把文件封装为formData对象，作为参数传给后台即可。

  let formData = new FormData();
  this.fileList.forEach(item => {
    formData.append("files", item.raw);
  });

  this.axios.post(api, formData);

下面是后台接口的写法：

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}

关于上传参数的问题 请求头application/x-www-form-urlencoded

请求头application/json;charset=UTF-8

退出登入后，禁止返回键操作

问题描述：

用户A登录系统操作完毕后，退出系统到登录页面。交予用户B操作，用户B在登录页面点击回退按钮，发现回退到用户A所操作过的页面。

退出登入后，禁止返回键操作：

logout(){
 	// 跳转到登录页面
    this.$router.push({
        path: '/',
    });
    // 退出登入后 禁止返回键操作
    window.history.pushState(null, null, document.URL);
    window.addEventListener(
        'popstate',
        function() {
            window.history.pushState(null, null, document.URL);
        },
        false,
    );
}

window.history对象

Window.history是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

history.back();     // 等同于点击浏览器的回退按钮
history.go(-1);     //等同于history.back();