VOL_常用记录!!-----前端

VOL_常用记录!!-----前端


js记录

1)js操作数组元素的方法(unshift(前),splice,push(后))

  • 总结来说,unshift() 是在数组前面添加元素,splice() 是在一个指定的位置上进行插入或删除等复杂操作,而 push() 则是在数组后面添加元素。
  1. unshift()

    • 作用:向数组的开头添加一个或多个元素,并返回新数组的长度。
    • 语法:array.unshift(element1, ..., elementN)
    • 示例:
      let myArray = [2, 3, 4];
      myArray.unshift(1); // 返回 4
      console.log(myArray); // 输出:[1, 2, 3, 4]
      
  2. splice()

    • 作用:灵活地从数组中添加/删除项目,然后返回被删除的项(如果有的话)。它可以用于多种操作,如插入、替换或删除数组中的元素。
    • 语法:array.splice(start, deleteCount, item1, ..., itemX)
    • 参数:
      • start: 要修改的数组起始位置(索引)。
      • deleteCount: 可选参数,要删除的元素数量。如果设置为0,则不删除任何元素,仅插入。
      • item1, ..., itemX: 可选参数,要插入到数组中的元素。
    • 示例:
      let myArray = [1, 2, 3, 4, 5];
      myArray.splice(0, 0, 'a', 'b'); // 返回 []
      console.log(myArray); // 输出:['a', 'b', 1, 2, 3, 4, 5]
      
      // 删除前两个元素并插入一个元素
      myArray.splice(0, 2, 'x'); // 返回 [1, 'a']
      console.log(myArray); // 输出:['x', 2, 3, 4, 5]
      
  3. push()

    • 作用:向数组的末尾添加一个或多个元素,并返回新数组的长度。
    • 语法:array.push(element1, ..., elementN)
    • 示例:
      let myArray = [1, 2, 3];
      myArray.push(4, 5); // 返回 5
      console.log(myArray); // 输出:[1, 2, 3, 4, 5]
      

2)js如何获取当前时间(yy-MM-dd HH:MM:SS)

getCurrentTime() {
      const now = new Date();
      return `${now.getFullYear()}-${(now.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now
        .getHours()
        .toString()
        .padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now
        .getSeconds()
        .toString()
        .padStart(2, "0")}`;
    },

3)"…"可迭代对象运算符–如:数组迭代解包添加元素

用于将一个可迭代对象(如数组)的内容展开,并将其元素作为单独的参数传给函数。
例子如下:

  • …rows 将 rows 数组的所有元素“解包”并逐个添加到 array 的末尾。
// 假设我们有一个数组
let array = [4, 5, 6];

// 另一个数组
let rows = [1, 2, 3];

// 使用扩展运算符将rows数组的元素添加到array数组的末尾
array.push(...rows);

// 此时,array数组的内容将会是[4, 5, 6, 1, 2, 3]
console.log(array); // 输出: [4, 5, 6, 1, 2, 3]

// push方法会返回新数组的长度,即6
console.log(array.push(...rows)); // 输出: 6

4)map遍历数组和foreach遍历数组的区别

  • 当你需要基于现有数组生成一个新的数组,且新数组的元素是由原数组元素经过特定计算得出时,应使用 map()
let _rows = rows.map((row) => {
        return {
          GoodsId: row.GoodsId,
          GoodsCode: row.GoodsCode,
          GoodsName: row.GoodsName,
          Img: row.Img,
          Specs: row.Specs,
          Price: row.Price
        };
      });
  • 当你只需要对数组中的每个元素进行某种操作(例如修改DOM、打印结果、累计求和等),并不关心返回值时,可以使用 forEach()
const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
console.log(sum); // 输出: 6

通过路由path避免引用的代码生成页面–扩展设置同步

onInited() {
      //在订单管理的选择数据弹出框显示此页面时,重新调整页面高度与隐藏其他的按钮
      if (this.$route.path == '/应用本页面(onInited所在页面)的路由path') {
        this.height = 550 - 150;
        //订单页面隐藏非查询按钮
        this.buttons.forEach((item) => {
          if (item.value != 'Search') {
            item.hidden = true;
          }
        });
      }
    },

http请求 (第三个参数表示–是否显示发起请求时的提示信息(默认否))

// 添加请求
submit() {
      let data = {
        delKeys: null,
        detailData: null,
        mainData: this.fields,
      };
      let Url = "api/表名/Add";
      this.http.post(Url, data, true).then((result) => {
        if (result.status == true) {
          this.$Message.su***ess("提交成功");
          this.reset();
          this.$emit("call-parent-method");
          //自定义事件通知父组件执行方法这边没有传值要传值可以添加参数("call-parent-method",参数数据)
        } else {
          this.$Message.su***ess("失败" + reslut.message);
        }
      });
    },
//增加表单验证  具体看vol组件API文档volForm组件查看代码
{
            field: "CHANGE_CONTENT",
            title: "变更内容",
            type: "text",
            required: true,//不能为空
            readonly: false,
            colSize: 6,
},
submit() {
      //同上

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.http.post(Url, data, true).then((result) => {
            //同上
          });
        } else {
          console.log("校验未通过");
          return false;
        }
      });
    },
//删除请求
        let url = "api/表名/del";
        this.http.post(url, [rows[0].PRODUCT_DETAIL_LIST_ID], false).then((reslut) => {
          if (reslut.status === true) {
            //删除行
            //this.$refs.table1.delRow();
            this.$Message.error("删除成功");
          } else {
            this.$Message.error("失败" + reslut.message);
          }
        });
//获取请求
        let Url = "api/表名/GetPageData";
        this.http.post(Url, {}, true).then((result) => {
          if (result.status == true) {
            // this.$Message.su***ess("成功");
          } else {
            this.$Message.error("失败" + result.message);
          }
        });
//获取某一页特定条件的30行数据
search() {
      let url = "api/CY_RD_PRODUCT_DETAIL/GetPageData";
      let Development_project_no = this.$store.getters.data().hahaha.obj;

      let wheres = {
        name: "DEVELOPMENT_PROJECT_NO",
        value: Development_project_no,
        displayType: "like",
      }
      let condition= []
      condition.push(wheres)
      let data = {
        page: 1,
        rows: 30,
        order: "desc",
        wheres: JSON.stringify(condition)
      }
      this.http
        .post(url, data , true)
        .then((result) => {
          console.log(result);
          if (result.status == 0) {
            let row = result.rows[0];
            this.fields.PRODUCT_DETAIL_CODE = row.PRODUCT_DETAIL_CODE;
            this.fields.PRODUCT_DETAIL_NAME = row.PRODUCT_DETAIL_NAME;
          } else {
            this.$Message.error(result.msg);
          }
        });
    },

缓存实现子父组件传值(vuex)

//写入缓存对象(xxx为全局缓存的唯一key)
this.$store.getters.data().xxx={obj:'123'};
//读取缓存对象
this.$store.getters.data().xxx.obj;
//修改缓存对象
this.$store.getters.data().xxx.obj="456";

//代码生成页面使用全局缓存,在methods方法中:
onInit(){
  //将整个查询页面的viewgrid组件全部缓存起来
  this.$store.getters.data().viewPageTest=this;
 //在子组件中可以直接使用,如刷新查询页面:this.$store.getters.data().viewPageTest.refresh()
}

扩展js的 方法扩展

1.明细表添加行,设置添加的默认值

addRow() {
      //明细表添加行,设置添加的默认值
      if (this.editFormFields.DEVELOPMENT_PROJECT_NO != "") {
        let obj = {
          DEVELOPMENT_PROJECT_NO: this.editFormFields.DEVELOPMENT_PROJECT_NO,
        };
        //给明细表添加行时,设置默认值。--onInited方法中对this.detailOptions.columns进行formatter也可以实现)
        //obj.xx=123;
        this.$refs.detail.addRow(obj);
        //明细表批量添加行this.$refs. detail.rowData.push(...[{},{}]);
      }else{
        this.$message.info("请先设置研发方案编号");
      }

    },

2.新建弹出框设置默认值

modelOpenAfter(row) {
      //点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据
      //(1)判断是编辑还是新建操作: this.currentAction=='Add';
      
      //给弹出框设置默认值
      if (this.currentAction == "Add") {
        this.editFormFields.REVIEW_COUNT = 0
        this.editFormFields.CHANGE_COUNT = 0
        this.editFormFields.TEST_COUNT = 0
      }
      //(3)this.editFormFields.字段='xxx';
      //如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值
      //看不懂就把输出看:console.log(this.editFormOptions)

	//新建时隐藏按钮
      this.detailOptions.buttons[2].hidden = this.currentAction == 'Add'
    },

3.新建或编辑保存后 返回状态提示

addAfter(result) {//编辑保存后result返回的状态及表单对象
      // this.$Notice.su***ess({ title: this.detailOptions.***Name + '编辑完成后:', desc: '返回的数据' + JSON.stringify(result) });
      result.status == true ?
        this.$Message.su***ess('保存成功') :
        this.$Message.error('失败!' + result.message)
      return true;
    },
updateAfter(result) {//编辑保存后result返回的状态及表单对象
  // this.$Notice.su***ess({ title: this.detailOptions.***Name + '编辑完成后:', desc: '返回的数据' + JSON.stringify(result) });
  result.status == true ?
    this.$Message.su***ess('保存成功') :
    this.$Message.error('失败!' + result.message)
  return true;
},

4.grid点击行事件(不是前面的复选框就单纯点击行)

rowClick({ row, column, event }) {
      //查询界面点击行事件
      this.$store.getters.data().hahaha = { obj: row.DEVELOPMENT_PROJECT_NO }; //缓存当前行的某个字段
      // console.log(this.$store.getters.data().hahaha.obj);
      $this.$refs.gridHeader.open2()//打开gridHeader的第二个box
    },

$parent获取父页面的数据如: $parent.editFormFields 或 $parent.currentRow

let $parent = null;
      //当前是子页面,获取查询viewgrid页面的对象()
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });

grid扩展js常用功能代码(如单选,选择数据等)

onInit() {
	//获取明细表的行数据  
	this.$refs.detail.getSelected() 注意获取的是一个数组
	//获取grid的点击行数据
	this.getSelectRows() 注意获取的是一个数组
	//新建或编辑-页面获取从表行数据--这不一定要写在这个方法只要在扩展js即可
	this.$refs.modelBody.$refs.table1.rowData()
	// 1.grid的table单选
 	this.single = true;
 	//设置界面上最多可显示的按钮数量 
    this.maxBtnLength = 6; 	
    //grid固定查询条件
    this.setFiexdSearchForm(true);
    //设置表高度
    this.tableHeight = 350;
    //设置弹出框标签宽度
    this.boxOptions.labelWidth = 150;
    // 2.选择数据
	this.editFormOptions.forEach(x => {
	        x.forEach(item => {
	          if (item.field == '选择的字段') {
	            //给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
	            item.extra = {
	              icon: "el-icon-zoom-out",
	              text: "选择数据",
	              style: "color:#2196F3;font-size: 12px;cursor: pointer;",
	              click: item => {
	                this.$refs.modelBody.openDemo("RD_PROJECT_ModelBody");
	              }
	            }
	          }
	        })
	      })
	      
	// 3.onInit中给grid添加按钮(splice方法可换成unshift或push)
      this.buttons.splice(2, 0, ...
        [{
          name: "查 看",
          icon: 'md-add',
          type: 'su***ess',
          onClick: function () {
            let row = this.getSelectRows()
            if (row.length > 0) {
              this.$store.getters.data().hahaha = { obj: row[0].DEVELOPMENT_PROJECT_NO };
              $this.$refs.gridHeader.open2()
            }
            else {
              this.$Message.error('请选择一条数据');
              return
            }
          }
        }
        ]
      )

	//4.onInited中给明细表添加按钮(splice方法可换成unshift或push)
	this.detailOptions.buttons.splice(2, 0, ...
        [{
          name: "变 更",
          icon: 'md-add',
          type: 'su***ess',
          onClick: function () {
            let row = this.$refs.detail.getSelected()
            if (row.length > 0) {
              let a = this.editFormFields.DEVELOPMENT_PROJECT_NO
              this.$store.getters.data().prjDetail = {
                dRow: row[0]
                , devID: this.editFormFields.DEVELOPMENT_PROJECT_NO,
                proDID: row[0].PROJECT_DETAIL_ID
              };
              $this.$refs.gridHeader.open3();
            }
            else {
              this.$Message.error('请选择一条研发方案明细');
              return
            }

          }
        }
        ]
      )
	
},
onInited() {
	  //设置弹出框宽度
      this.boxOptions.width = 1000;
      //框架初始化配置后
      //如果要配置明细表,在此方法操作
      //this.detailOptions.columns.forEach(column=>{ });
    },
转载请说明出处内容投诉
CSS教程_站长资源网 » VOL_常用记录!!-----前端

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买