javascript – Uncle.C 的前端旅程

element-ui table tree

默认展开节点属性 : default-expand-all

本地有完整的树形结构数据，成为展开节点条件，数据里面有：children

懒加载模式，数据里面有: hasChildren: true

这两个属性还可以通过 tree-props 属性自定义：

:tree-props="{children: 'children', hasChildren: 'hasChildren'}"

vue初始化页面的data

在写新增编辑页面的时候，有些情况需要把页面的data全部初始化还原到新增的时候，

Object.assign(this.$data, this.$options.data());

el-form动态表单验证项

template代码：

<el-form-item 
            label="目标用户及数据需求描述" 
            class="project-desc project-targetUser" 
            prop="targetUser" 
            :rules="targetRequired ? addFormRules.targetUser : addFormRules.targetUserFalse"
          >

通过:rules来控制启用哪个校验规则

script代码：

targetUser: [
          { required: true, message: '请输入目标用户及数据需求描述', trigger: 'blur' }
        ],
        targetUserFalse: [
          { required: false, message: '请输入目标用户及数据需求描述', trigger: 'blur' }
        ],

el-form清除单项校验属性

如果有选项联动，选择其中一个选项，清除联动项的值并初始化选项的值，会触发form表单的blur事件和校验规则。

kindId: [
      { required: true, message: '请选择设备小类', trigger: 'change' }
],

可以在 $nextTick 用单独清除表单验证项来清理弹出的错误提示：

this.$nextTick(()=>{
        this.$refs.reportForm.clearValidate(['name'])
      })

clearValidate() 参数接收数组

对象扩展运算符可以用于合并两个对象

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

js查找两个数组中相同项

代码如下：

array1.filter(function(n) {
    return array2.indexOf(n) != -1
});

JS数组里纯数字和纯字符串之间的转换

数组里的数字转字符串：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String);  //结果： ['1', '2', '3', '4', '5', '6', '7', '8', '9']

数组里的字符串转数字

var a = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
a.map(Number);  //结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

参考：廖雪峰Javascript教程

JS闭包!function(){}()

叹号后面跟函数!function
和加号后面跟函数+function
都是跟(function(){})();这个函数是一个意思，都是告诉浏览器自动运行这个匿名函数的，因为!+()这些符号的运算符是最高的，所以会先运行它们后面的函数

H5移动端调用浏览器Geolocation方法获取手机gps经纬度方法

具体请看下面代码：

<script>
    var x=document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        } else {
            x.innerHTML="当前浏览器不支持Geolocation";
        }
    }
    function showPosition(position) {
        x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
    }
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                alert("User denied the request for Geolocation.")
                break;
            case error.POSITION_UNAVAILABLE:
                alert("Location information is unavailable.")
                break;
            case error.TIMEOUT:
                alert("The request to get user location timed out.")
                break;
            case error.UNKNOWN_ERROR:
                alert("An unknown error occurred.")
                break;
        }
    }
    </script>

JQ重置input file

html:

<input type="file" id="control">

Js:

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};