zoukankan      html  css  js  c++  java
  • Vue数组循环

    之前写一个动态可以增删的表单时,偷懒用的element的组件,导致数据包了好几层,所以为了拿出来进行了如下处理

    <script>
    //import dataTable from "@/mixins/dataTable.js";
    export default {
      //mixins: [dataTable],
      created() {
        this.getYear();
      },
      data() {
        return {
          url: "annualLeave/annualLeaveSets",
          modelForm: {
            domains: [
              {
                value: {
                  startYearDate: "0",
                  endYearDate: "0",
                  restDay: "0",
                  restTime: "0"
                }
              }
            ]
          },
          contentForm: {},
          pageSizes: [40, 50, 100, 500, 1000], // 所有可选择的条数
          pageSize: 40 // 控制一页显示的条数
        };
      },
    
      methods: {
        getYear() {
          this.$http
            .get("annualLeave/annualLeaveSets", {
              page: { pn: 1, size: 40 }
            })
            .then(res => {
              this.modelForm.domains = res.content.content.map(res => {
                return {
                  value: res
                };
              });
            })
            .catch(res => {});
        },
        // submitForm() {
        // },
        submitForm(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              // alert("submit!");
              console.log(this.modelForm);
    
              this.contentForm = this.modelForm.domains.map(res => {
                return res.value;
              });
              for (var i in this.contentForm) {
                if (
                  this.contentForm[i].startYearDate >
                  this.contentForm[i].endYearDate
                ) {
                  this.$message.error("第二个数字格式有误");
                }
              }
              // console.log(contentForm);
              // return;
              console.log(this.contentForm),
                this.$http
                  .postJSON("annualLeave/annualLeaveSets/create", {
                    items: this.contentForm
                  })
                  .then(res => {
                    this.$message({
                      message: "保存成功",
                      type: "success"
                    });
                    this.getYear();
                  })
                  .catch(res => {
                    this.$message.error("保存失败");
                  });
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        removeDomain(item) {
          var index = this.modelForm.domains.indexOf(item);
          console.log(this.modelForm);
          if (index !== -1) {
            this.modelForm.domains.splice(index, 1);
            console.log(this.modelForm);
          }
        },
        addDomain() {
          this.modelForm.domains.push({
            value: {
              startYearDate: "0",
              endYearDate: "0",
              restDay: "0",
              restTime: "0"
            }
          });
        }
      }
    };
    </script>

    对于数组的循环这样写

     this.contentForm = this.modelForm.domains.map(res => {
                return res.value;
              });
              for (var i in this.contentForm) {
                if (
                  this.contentForm[i].startYearDate >
                  this.contentForm[i].endYearDate
                ) {
                  this.$message.error("第二个数字格式有误");
                }
              }
  • 相关阅读:
    Android Apk获取包名和Activity名称
    SoupUI接口测试学习分享
    Android 手机自动化测试工具有哪几种?
    SVN和CVS的区别
    名词
    本地解析地址步骤
    python3.6.1+selenium3.0环境安装问题及解决方法
    简述企业信息化与企业架构关系
    企业架构实践的线下公开课学习感悟
    golang 12.9 go mod 实践
  • 原文地址:https://www.cnblogs.com/vivin-echo/p/13948845.html
Copyright © 2011-2022 走看看