VUE学习

（1）数组去除重复数据

let selectStores = [];
        
// 去除重复数据
 const res = new Map();
 selectStores=selectStores.filter((a) => !res.has(a.id) && res.set(a.id, 1))

（2）数组替换或删除

this.form.serviceItemList = []

// 添加数据
this.form.serviceItemList.push(_this.item);

 // 删除下标index，长度一位数据（从index算起）          
 this.form.serviceItemList.splice(_this.index,1);
 
 // 从下标index处添加数据
this.form.serviceItemList.splice(_this.index,0,_this.item);

// 删除数组最后一个元素
list.pop();
pop 学习地址：https://www.w3school.com.cn/jsref/jsref_pop.asp

（3）数组与Json转换

// 转换成json
let areaData = [];
areaData.push({key:arr[0],value:CodeToText[arr[0]]});
areaData.push({key:arr[1],value:CodeToText[arr[1]]});
areaData.push({key:arr[2],value:CodeToText[arr[2]]});
this.form.cityCodeMap = JSON.stringify(areaData);

// JSON转换成list
this.cityCodeMapList = JSON.parse(this.form.cityCodeMap);

（4）数组与String转换以英文逗号隔开

// 转变成数组并改为Number类型
tagIds: item.tagIds != null ? item.tagIds.split(",").map(Number) : [],

// 数组以，隔开转换成String类型
data.tagIds = data.tagIds.join(",");

（5）使用两层组件时，弹框变灰，页面被遮盖问题处理

问题处理：在第二层el-dialog插件里，新增 :append-to-body=“true”

（6）做点击按钮复制文本框内容

https://blog.csdn.net/Ls66666Ls/article/details/110850533

（7）Vue Element el-select选择器远程搜索回显问题

问题解决：
（1）查看类型是否对应上，例如String类型和int类型匹配不上
（2）列表里是否有该数据，没有则lebal值不显示

<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `${item}`, label: `label:${item}` };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
      
      // 当获取保存的数据时，需在赋值的地方，保证options有值
      this.options = this.list;
      itemCovertForm(item) {
	      var _this = this;
	      this.value = item;
	      if (item) {
	        this.options = this.list;
	      }
	   },
    }
  }
</script>

（7）el-table 改数据源的值但是不刷新

参考链接：
https://blog.csdn.net/happy_bz/article/details/103254028

（8）git 冲突发布

git add .
git commit -m"代码提交"
git pull
git push

（8）安装环境及遇到问题

一、直接安装

npm install sass-loader node-sass -D
二、cnpm安装

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
cnpm install sass-loader node-sass -D

链接：https://blog.csdn.net/weixin_40668374/article/details/108595567

（9）iframe 使用

iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

<iframe :key="itemkey"  :src="form.sampleGraph" frameborder="0" align="left" width="350" height="1050" scrolling="no"></iframe>

<script>
export default {
data() {
    return {
      itemkey: ''//临时变量，使用临时变量使iframe刷新
    };
  },
  methods: {
	// 点击刷新或保存按钮时，itemkey进行改变
    saveUpData() {
      this.itemkey = Math.random();
    },
  }
};
</script>

（10）判断是否数组中包含某个元素

（1）orderItemIdList.indexOf(id) != -1 存在
（2）orderItemIdList.indexOf(id) == -1 不存在

（10）String转int类型

（1）String数组转int类型数组：_this.orderItemIds.split(",").map(Number)

（2）String转数组 ：Number(String类型数据);

（11）省市区三级联动获取

1. npm install element-china-area-data -S

2. import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

（1）provinceAndCityData是省市二级联动数据（不带“全部”选项）

（2）regionData是省市区三级联动数据（不带“全部”选项）

（3）provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）

（4）regionDataPlus是省市区三级联动数据（带“全部”选项）"全部"选项绑定的value是空字符串""

（5）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市

（6）TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

<template>
  <div class="app-container">
      <el-cascader
        class="widthSmall"
        :options="options"
        v-model="selectedOptions"
        @change="cityCodeMapChange">
     </el-cascader>
  </div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
  },
  methods: {
    cityCodeMapChange(arr) {
      this.filter.provinceCode = arr[0];
      this.filter.cityCode = arr[1];
      this.filter.areaCode = arr[2];
      this.filter.receiverProvince = CodeToText[arr[0]];
      this.filter.receiverCity = CodeToText[arr[1]];
      this.filter.receiverRegion = CodeToText[arr[2]];
    },
  },
};
</script>

https://blog.csdn.net/bamboozjy/article/details/82220894

（12）vue中怎么样监听对象中某一个值的改变;

https://blog.csdn.net/weixin_44888475/article/details/94361290

（13）vue中From需用条件验证字段是否传值

data() {
	var checkStartTime = (rule, value, callback) => {
        if (!this.coupon.startTime || !this.coupon.endTime) {
          callback(new Error("请选择有效时间"));
        }
        callback();
      };
return {
	rules: {
        name: [
            {required: true, message: '请输入优惠券名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          publishCount: [
            {type: 'number',required: true, message: '只能输入正整数', trigger: 'blur'}
          ],
          startTime:[
           { required: true, validator: checkStartTime, trigger: "blur" }, 
         ],
       }
     }
  }

（14）el-select获取value和label值

handlePlatformChange(id){
    console.log("select中对应value值",id)
    let selectedName = {};
     selectedName = this.qrCodePositionTypeList.find((item)=>{
         return item.value === id;
         //筛选出匹配数据，是对应数据的整个对象
     });
},

（15）el-radio 循环遍历

<el-radio-group v-model="form.selectTime">
    <el-radio
      v-for="item in times"
      :key="item.value"
      :value="item.value"
      :label="item.value"
    >{{item.label}}</el-radio>
   </el-radio-group>

（16）el-select multiple 赋值后点不动问题处理

在编辑数据时，使用v-model绑定 el-select多选，但无法进行编辑、删除，这是因为由于一些嵌套特别深的数据，导致数据更新了，但是页面却没有重新渲染。

需要使用this.$forceUpdate()迫使 Vue 实例重新渲染。

在el-select 中使用@change="$forceUpdate()"

（17）vue 链接数据改变时页面未更新数据

watch: {
    '$route' (to, from) {
        // 监听路由，调用方法更新页面数据
    }
},

（18）ElementUI el-date-picker 设置日期+时间 返回值少8小时

获取的value 还是比当前时间少8小时，问题由时区导致
value-format格式设置加上时区标志

value-format="yyyy-MM-ddTHH:mm:ss.000Z"
type="datetime"

（19）$emit用法

https://blog.csdn.net/sllailcp/article/details/78595077

问题

（1） Avoid mutating a prop directly since the value will be overwritten whenever

原因：通过props传递给子组件的show，不能在子组件内部修改props中的show值。
连接：https://blog.csdn.net/github_35549695/article/details/82770044

（2） Avoided redundant navigation to current location

原因：重复点击路由跳转报错处理
连接：https://blog.csdn.net/qq_37919055/article/details/107105232

（3） VUE打包文件过大问题处理

# 问题描述
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.32 MiB)
      static/css/chunk-elementUI.68c70ad5.css
      static/js/chunk-elementUI.4418228a.js
      static/css/chunk-libs.3dfb7769.css
      static/js/chunk-libs.0241ef93.js
      static/css/app.1091a630.css
      static/js/app.5c140260.js

处理问题：