vue 知识总结

数据不及时刷新，下拉框选择无效，文本框无法输入等问题

1. 数据更新无效【原文】

   对象obj，属性key，设置value
   this.$set(obj,key,value)
   数组arr，索引index，设置value
   this.$set(arr,index,value)

2. 其他奇葩问题的首要思路
   （1）属性未声明
   （2）返回列表内无此属性
   （3）属性类型错误 '',[],new Map()
   （4）值为0 的时候 的判断

解除对象间的相互影响

JSON.parse(JSON.stringify(obj);
如 this.form = res.data;
console.log(this.form, res.data);
会发现res.data会受this.form影响，类型会随之变化

判断下拉框值，可能是单选多选

typeof index === 'undefined' || index===null || index ==="" || index.length === 0

多方法接口是保证按照次序调用展示

getAction(url,params).then(async (res) => {
await this.xxfunction();
});

async xxfunction(){

}

引入全局方法和全局变量

以下为global.js内容
const yesOrNoTableData=[
{"value":1,"label":"是"},
{"value":0,"label":"否"},
];

const changeObjectToLabel = (dataOption, data, prop) =>{
if(typeof data === "object"){
return changeValueToLabel(dataOption, data[prop]);
}
};

export default
{
yesOrNoTableData,
changeObjectToLabel,
};

修改main.js
import _GLOBAL from "@/api/global/global";
Vue.prototype._GLOBAL = _GLOBAL;

vue页面内如何使用
this._GLOBAL.yesOrNoTableData

保留this，在其他地方使用，比如table column的format方法

常用方法

1. 数组去重

   uniqueValArray(array) {
   return array.filter(function(ele, index, array) {
   return array.indexOf(ele) === index;
   });
   }

2. 获取数组内某组元素，输出指定属性元素

   convertToSelect(array, sort, direction, ivalue, itext, ovalue, otext) {
   let options = [];
   if (array == null || array.length === 0) {
   return options;
   }
   if (sort && direction) {
   if (direction === "asc") {
   array = array.sort(function compareFunction(param1, param2) {
   return param1[sort].localeCompare(param2[sort]);
   });
   } else {
   array = array.sort(function compareFunction(param1, param2) {
   return param2[sort].localeCompare(param1[sort]);
   });
   }
   }
   for (let i = 0; i < array.length; i++) {
   let option = {};
   option[ovalue] = array[i][ivalue];
   option[otext] = array[i][itext];
   options.push(option);
   }
   return options;
   }

思路总结

1. 下拉框，特别是级联下拉框，change事件 ，先清空所有下级的选中值，以及下下级的下拉框数组，然后再处理选中值数据
2. form提交时数据处理，先通过JSON.parse(JSON.stringify(obj); 赋值新对象再处理，以防止提交失败，再次提交时，数据不合理。