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

2024-03-01 08:20:08 分类：前端 热度：63 评论： 0

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_常用记录!!-----前端
qqy

qqy

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买