elementUI使用中遇到的坑

柔情只为你懂 2021-09-17 01:54 808阅读 0赞

1、

通过el-upload获取到的文件file是封装后的，其中与普通input type=file 中获取到的文件是elementUI中的file.raw;

如果在读取文件时直接使用elementUI的file会报错：

Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of ‘Blob’  
2,

element-ui中的select下拉框，其中的选中项option是通过select中的v-model监听的变量来和option中的value(一般是id)进行匹配，如果匹配成功，则把相对应的label显示到select框中。

其中，v-model所监听的变量数据类型一定要是Number类型，如果是String类型则无法进行匹配，则会将接收到的String类型的字符串原样输出到页面上。

如果在使用element-ui1.4.\* 版本中的表单时，发现某些字段绑定不了值，或者checkbox在你绑定后一点就全选了或者全部选，又或者表单验证时候有些字段没动静，那么十有八九是：

1、el-form 标签绑定data中的form时候，请使用:model="form" 而不是v-model="form"。

2、请给el-form-item 标签中加上prop属性。

一些很简单的问题，也是自己踩过的坑，希望能帮到大家。

一句话总结，就是很好很强大。但是ElementUI中树的加载可以通过load属性一个一个懒加载，在官方的案例中有这种用法，个人非常不推荐这种用法，很麻烦，节点的动态删除和修改都很麻烦，我一开始就使用了这个，后来发现动态添加节点、删除节点、节点过滤统统都很麻烦，然后换个思路，使用data，所有问题一下就都解决了。使用data思路如下：在tree中使用data属性加载数据，后期所有涉及到节点动态添加删除的事，我们统统只去操作data就可以了，这也符合数据驱动视图的思想。

1.在页面加载时，我在mounted方法中就去获取了所有的部门数据，然后直接加载到树上（这种方式比较省事，特别是处理后面动态添加删除时很方便，小伙伴在工作中可以根据实际情况选取合适的策略）。核心代码如下：

this.getRequest("/system/basic/dep/-1").then(resp=> {
        _this.treeLoading = false;
        if (resp && resp.status == 200) {
        _this.treeData = resp.data;
        }
    })

2.添加节点时，当服务端添加成功后，会返回刚刚添加的节点的json，通过递归找到这一段json所在的位置，动态假如到树中。递归过程如下:

setDataToTree(treeData,pId,respData){
    for(var i=0;i<treeData.length;i++) {
        var td = treeData[i];
        if(td.id==pId) {
        treeData[i].children=treeData[i].children.concat(respData);
        return;
        }else{
        this.setDataToTree(td.children, pId, respData);
        }
    }
    }

这是通过递归找到添加的位置，动态添加。

3.删除节点时，当服务端返回删除成功时，一样找到删除节点的位置，动态从树中删除。核心代码如下:

deleteLocalDep(treeData,data){
    for(var i=0;i<treeData.length;i++) {
        var td = treeData[i];
        if(td.id==data.id) {
        treeData.splice(i, 1);
        return;
        }else{
        this.deleteLocalDep(td.children, data);
        }
    }
    }

这也是在删除成功后，通过递归找到删除的位置，动态删除数据。

结合很多人的东西写的这个博客希望能帮到需要帮助的人!