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方法

  <script>
  let _that;
  beforeCreate() {
    _that = this;
  },

  ………………

  {
      prop: "materialStatus",
      label: "变化点状态",
      options: {
        width: 200,
        formatter: function(row, column, cellValue){
          return _that._GLOBAL.changeObjectToLabel("materialStatus", row, "materialStatus");
        }
      },
    },
  ………………
  </script>

常用方法

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); 赋值新对象再处理，以防止提交失败，再次提交时，数据不合理。