Vue基本语法

1.遍历循环及过滤filter:可参考:https://www.cnblogs.com/liuzhengkun/p/11216966.html

Vue基本语法

2.VUE-Element组件-select选择器的使用 参考:https://blog.csdn.net/gu_wen_jie/article/details/84281915

下拉框:
Vue基本语法
Vue基本语法
默认选中:详解element-ui中el-select的默认选择项问题 https://www.jb51.net/article/166813.htm

3.VUE-Element组件-checkbox复选框的使用

Vue基本语法

         <el-col :span="8">
              <el-form-item label="线路板适配厂商" prop="manufacturer">
                <el-checkbox-group v-model="requirementData.manufacturer" :disabled="editData.type==1||isExamine">
                  <el-checkbox label="BJ" />
                  <el-checkbox label="BBT" />
                  <el-checkbox label="运营商" />
                </el-checkbox-group>
              </el-form-item>
            </el-col>

初始化data时:

 requirementData: {
     manufacturer: ‘‘, // 厂商
},
checkList: []  // 订单要求多选线路板适配厂商

这里manufacture在初始化时默认赋值是字符串,这样的话,上面的复选框点击其中任一个都是全选,
应该改成:

  mounted() {
    this.f_InitialData(); // 初始化数据源
  },
 methods: {
  // 初始数据值
    f_InitialData: function() {
        this.requirementData.manufacturer = this.checkList;// 线路板适配厂商(特别注意:这里一定要赋空的数组,必须是数组,如果不赋数组则效果就是点击任一个checkbox都是全选)
    }
}  

新增存盘时参数值:

       var info = this.requirementData; // 生产任务要求
      let stringData = ‘‘;
      if (info.manufacturer.length > 0 && info.manufacturer !== null) {
        info.manufacturer.forEach((item) => {
          stringData += item + ‘,‘;//把线路板厂商字段存的数组转化为字符串方便保存到数据库中
        });
      }

保存后数据库中的字段存的是字符串:
Vue基本语法

编辑时获取厂商数据:

  const info = response.data[0];
            this.checkList = [];//定义数组接收获取的厂商
            info.manufacturer.split(‘,‘).forEach((item) => {
              if (item !== ‘‘) {
                this.checkList.push(
                  item
                );//因为保存到数据库中的是字符串,页面中要显示checkbox还需将字符串转化为数组赋给页面中的字段
              }
            });
            this.requirementData.manufacturer = this.checkList;// 线路板适配厂商(再把数组赋给requirementData.manufacturer,这样编辑就可获取到厂商数据checkbox)
4.foreach终止循环:

Vue基本语法
这样的效果 return 无效 代码继续向下执行输出了11

解决办法1:用for循环即可
Vue基本语法
解决方法2:通过抛出异常的方式实现终止。

 try {
       this.bomGoupData.forEach(element1 => {
       if (element1[‘bomType‘] === ‘1‘) {
          existStandardBom = true;
          throw new Error(‘待变更的BOM列表有标准BOM 不允许变‘);// 这里抛出异常是为终止foreach循环
       }
      });
    } catch (error) {
      // throw new Error(‘待变更的BOM列表有标准BOM 不允许变更‘);
   }

补充:JavaScript跳出循环的三种方法(break, return, continue) https://www.jb51.net/article/166574.htm

Vue基本语法

上一篇:经典业务: 删除最老的文件


下一篇:SVN不显示log 显示1970年问题