关于vue和element-ui的问题汇总

1.router的配置：

import plat_list from '../views/developer/list'
const list = [
{path: '/developer/plat_list', component: plat_list},
]
export default list // 给当前模块使用
export { list } // 给 portal 使用

2.vue页面：
2.1 关于button样式的绑定

2.2 点击事件是否带参问题
2.3 父、子组件的调用：

父组件：



showEdit(apiId, appId){
this.$router.push('/developer/my/plat_newApi_edit/' + apiId + '/' + appId)   //页面跳转格式(多个参数中间加上'/')
},
子组件：edit(id, appId){
this.$emit('edit',id, appId)
},
或者：
父组件直接调用子组件方法：(all为子组件,apiNameList为函数)
vm.$refs.all.apiNameList(vm.appQid,vm.appQname);

2.4 数字类型的验证：
2.4.1 数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

v-model.number="ruleForm"

2.4.2 validRules:[
{ required: true, type: ‘number’},
]
2.5 el-select选择器，字符串和数字类型的转换问题
2.5.1

   			
//v-model的值为当前被选中的el-option的 value 属性值

2.5.2 将数据库获取的id和绑定的value关联即可，value为接收参数的属性
2.6 el-col :span=“8” 每一行分为24分，:span表示当前col占多少
2.7 el-form prop="" 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
2.8 v-if和vi-show的区别：
2.8.1

但是v-show不可以和template一起使用,也不支持v-else

2.8.2 v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
2.8.3 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
2.9 类型转换的方法比较：
2.9.1

2.9.2

{{changeData(paramsInfos)}}

2.9.3 使用template
2.10 标签:
2.11 手动获取GUID：

guidSingle(){
return (((1+Math.random())*0x10000)|0).toString(16).substring(1)
},
guid(){
return (this.guidSingle()+this.guidSingle()+this.guidSingle()+this.guidSingle()
+this.guidSingle()+this.guidSingle()+this.guidSingle()+this.guidSingle())
},
guid(){
let gdStr = null
for(int i = 0; i < 8; i++){
gdStr += this.guidSingle()
}
return gdStr
}

2.12 Lambda表达式：() => {}
2.12.1 =>前面的 () 是参数，后面的 {} 是函数体 Lambda 表达式 x => x * x 读作“x goes to x times x”
2.13 filters:
2.13.1

filters:{
formatData(data){
let obj ={varchar:"字符串",number:"整型",date:"日期",double:"浮点数",clob:"大文本"};
return obj[data];
},
},

2.14 父、子组件：
2.14.1 父：

import result_table from "./comp_new_api/result_param_table.vue"
 

	 

子：
props:{
    postModel3:{type:Object},
    popInfo:{type:Object},
    dataOps:{type:Array},
    resultData:{type:Array},
},

2.15 设置验证方法：
2.15.1

    var validateTel = (rule, value, callback) =>{
	    let vm = this
	    var telReg = /(^[0-9]{3,4}\-[0-9]{3,8}$)|(^0{0,1}(13|14|15|18|17)[0-9]{9}$)/;
	    if(!telReg.test(vm.userInfos.tel)){
	   		 callback(new Error ("联系电话格式不正确！"));
	    }else{
	   		 callback();
	    }
    };
    validRules:{
	    tel: [
	    { message: '请输入公司电话'},
	    { min: 1, max: 12,  message: '联系电话长度不能超过12个字符'},
	    { validator: validateTel, trigger: 'blur'},
    ],
}

2.15.2 判定是否为旧值：

if (vm.oldName == null || vm.oldName == '' || (vm.oldName != '' && vm.oldName != null && vm.postModel.name != vm.oldName)) 
//满足此条件，才进行同步校验；若改动的值和旧值一样，则不判定重复性

2.16 表单重置：

this.$refs['refForm'].resetFields()
this.$refs.refForm.resetFields()

2.17 table获取索引：
scope.$index
scope.row: {
表单内容
},
2.18 confirm:(属于element-ui的MassageBox)

vm.$confirm('','',{
confirmButtonText:'确定',
cancalButtonText:'取消',
type: 'warning',
}).then(()=>{

}).catch(()=>{

})

2.19 根据条件是否禁用 :disabled=“ok”
2.20 的

handleClick(){

},

2.21 条件查询：
2.21.1

tableQuery: {
    start: 1,
    length: 6,
    draw: 0,
    order: '',
},
tableData: {
    aaData: [],
    draw: 0,
    iTotalDisplayRecords: 0,
    iTotalRecords: 0,
},

2.21.2

let obj = $.extend({}, this.tableQuery, {filter:eduFilterParam(this.filter)})    //$.extend()
http.get(server_url_system + '/developer/apiList/' + appQid, {params: obj})

2.22 树状图选择器：
2.23 单独赋值给对象时，先将值赋予xhr.data.data，再将xhr.data.data赋给目标对象，保证完整性。

http.get(server_url_system + '/developer/apiInfo/' + apiId)
.then(function (xhr) {
    if (xhr.data.data){
	    xhr.data.data.url = vm.url
	    vm.exg = xhr.data.data
    }
}

2.24 JSON各种转换：
2.24.1 JSON.parse(text[, reviver])
将一个字符串解析为JSON，可选地转换生成的值及其属性，并返回值。用于从一个字符串中解析出json 对象。
参数说明：
text：要被解析成JavaScript值的字符串。
reviver：如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。
eg：

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

2.24.2 JSON.stringify(value[, replacer [, space]])
返回与指定值相对应的一个JSON字符串，可选地仅包含某些属性或以用户定义的方式替换属性值。用于从一个对象解析出字符串。
参数说明：
value:将要序列化成 一个JSON 字符串的值。
replacer:可选，如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数
组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为null或者未提供，则对象所有的属性都会被序列化。
space:可选，指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；
如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。
eg：

JSON.stringify({});                        // '{}'
JSON.stringify(true);                      // 'true'
JSON.stringify("foo");                     // '"foo"'
JSON.stringify([1, "false", false]);       // '[1,"false",false]'
JSON.stringify({ x: 5 });                  // '{"x":5}'

2.25 数组和字符串转换：
2.25.1 数组转字符串：

前端：
let a = new Array(1,2,3,4,5)   //[1, 2, 3, 4, 5]
let b = a.join(",")				//"1,2,3,4,5"
后台：	
String.join(",",a)
2.25.2	字符串转数组：
前端：
let a = "1,2,3,4,5" 			//"1,2,3,4,5"
let b = a.split(",")			//["1", "2", "3", "4", "5"]
后台：  
Arrays.asList(a.spilt(","))

2.26 获取参数有递进关系：

http.get(server_url_system + '/developer/restfulInfo/' + apiId)
.then(function (xhr) {
    return http.get(server_url_system + '/developer/categoryInfo/' + categoryId)
    }).then(function (xhr) {
    
}

2.27 方法里存在多个post请求如何优化处理
2.28 a[]部分属性值赋给b[]

for (let i = 0; i < vm.resultData.length; i++){
let obj=new Object();
obj.name=vm.resultData[i].name
obj.dataType=vm.resultData[i].dataType
obj.description=vm.resultData[i].description
vm.resultTemp.push(obj)
}

2.29 post请求的顺序执行(前一post请求执行完后再执行下一个post请求)
2.30 处理因初始化导致的第一条数据为空的问题：
2.31

_.forEach(obj, function(vm)){

}

2.32 文件上传功能：

showUploadDialog(){
	    let vm = this;
	    window.fileUpload({
		    title: '上传应用图标',
		    uploadFileMaxNum: 1,
		    extensions: 'jpg,png,gif,jpeg,bmp',
		    confirm: function (files) {
			    vm.imageUrl = vm.uploadParentUrl + "/file/data/" + files[0].id;
			    
			    //http.get(window.systemParameter.FILE_SYSTEM_URL + '/convert/'+ v.id + '/video')
			    //调用convert方法就不用再调用update了
			    //http.get(systemParameter.FILE_SYSTEM_URL + "/file/convertresult/" +v.id)
			    
			    vm.postModel.icon = vm.imageUrl
			    vm.showBtn = false
			    vm.pId = files[0].id
		    }
	    });
},

updateIcon(){
    let vm = this
    http.get(vm.uploadParentUrl + "/file/update/" + vm.pId)
    .then(function (xhr) {
	    if (xhr.status == 200){
	   		 console.log("更新成功")
	    }
    })
},

2.33 node内存溢出:警告-CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
调试流程:
安装

npm install -g increase-memory-limit
运行
increase-memory-limit
scripts": {
"fix-memory-limit": "cross-env LIMIT=2048 increase-memory-limit"
},
"devDependencies": {
"increase-memory-limit": "^1.0.3",
"cross-env": "^5.0.5"
}