vue项目笔记

vue项目笔记

计算属性

//获取数组中当前分期下并且ffactplotarea!=null的数据并且累加起来，保留两位小数
const field = this.Buildings.filter(a => a.fpbid === this.FPBID).length
if (field > 0) {
 const new_arr = this.Buildings
 .filter(a => a.fpbid === this.FPBID && a.ffactplotarea != null)
 .map(obj =>
  {
     return obj.ffactplotarea
  })
  if (new_arr.length > 0) {
     let arrSum = eval(new_arr.join('+'))
     parseFloat(arrSum)
     arrSum = Math.round(arrSum * 100) / 100
     return arrSum
     } else 
     {
       return 0
     }
  else {
     return 0
  }
}   

ant design vue的两种表单，推荐用第二种

1. form表单

ref: ProductModal，form: ProjectForm

<a-form ref="ProductModal" :form="ProjectForm" v-bind="formLayout">
  <a-form-item style="display: none; width: 100%" label="名称">
      <a-input v-decorator="['name', { initialValue: this.ProductForm.name }]"  />
  </a-form-item>
</a-form>
//表单注册
beforeCreate() {
this.ProjectForm = this.$form.createForm(this)
},
//必填验证
this.$refs.ProductModal.form.validateFields(valid => {
if (valid) {
console.log('error submit!!')
return false
} else {
//提交
}
//获取所有表单数据：
this.$refs.ProductModal.form.getFieldsValue('')
//清空表单：
this.ProjectForm.resetFields()
//给表单中的某一项赋值：
this.ProjectForm.setFieldsValue({ fparentid:this.ProductFormData.fparentid })
//若父组件想获取子组件中form表单的值，写法：
//子组件：
<project-card
   ref="refProjectDataForm"
   :projectMainData="projectMainData" 
/>
//获取
const { $refs: refDataForm } = this
refDataForm.hasOwnProperty('refProjectDataForm')
refDataForm.refProjectDataForm.form.getFieldsValue('')//获取表单所有的值

2. formmodel表单:

ref:PorjectModal ，:model=“ProjectForm”

 <a-form-model ref="PorjectModal" :model="ProjectForm" v-bind="formLayout" :rules="rules">
   <a-form-model-item label="项目名称" prop="name">
       <a-input v-model="ProjectForm.name" placeholder="请输入名称" />
   </a-form-model-item>
   <a-form-model-item label="公司" prop="companyname">
      <a-select
          v-model="ProjectForm.companyname"
          placeholder="请输入公司名称"
        >
        <a-select-option :value="item.id" v-for="(item, index) of this.$store.state.cityCompany" :key="index">
         {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
 </a-form-model>
  rules: {
    //必填提示
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  },
//不需要注册
//必填验证
this.$refs.PorjectModal.validate(valid => {
//valid的值为true/false
if (valid) {}
else{
console.log('error submit!!')
return false
}
//获取表单所有的值
this.ProjectForm
//清空表单
this.$refs.PorjectModal.resetFields()