前端项目中几个实用技巧

本文已参与「新人创作礼」活动，一起开启掘金创作之路。项目中JavaScript相关点

一 JavaScript中各种符号用法

||（双竖线）

表示前者不存在则取后面的值

function(obj){
    var a = obj || {}
}
复制代码

等价于

 
function(obj){
    var a;
	if(
		obj === 0 || 
		obj === "" || 
		obj === false || 
		obj === null || 
		obj === undefined
	){
 		a = {}
 	} else {
		a = obj;
	}
}
复制代码

??（双问号）空值合并运算符(??)

表示前者为null或者undefined是则取后面的值，减少代码。

function(obj){
    var a = obj ?? {}
}
复制代码

等价于

 
function(obj){
    var a;
	if( 
		obj === null || 
		obj === undefined
	){
 		a = {}
 	} else {
		a = obj;
	}
}
复制代码

实际上接口返回的数据中，content很可能为null 或者 undefined，或压根没返回content，因此我们判断时需要加上默认值，如下

let res = {
  data: {
    content: null, // or false, or 0,
    content1: false,
    content2: 0
  }
}
// 加上默认值
const tableList = res?.data?.content || [4,5,6]  //[4,5,6]
// 但我们发现，对于||，返回false或者0，也会取后者
const tableList = res?.data?.content1 || [4,5,6]  //[4,5,6]
const tableList = res?.data?.content2 || [4,5,6]  //[4,5,6]

复制代码

此时，双问号??似乎就是为了解决双选链此问题而提出的，我们只想在返回null或者undefined时才取后者

// 加上默认值
const tableList = res?.data?.content ?? [4,5,6]  //[4,5,6]
const tableList = res?.data?.content1 ?? [4,5,6]  //false
const tableList = res?.data?.content2 ?? [4,5,6]  //0

复制代码

?.（问号点）可选链

可选链操作符( ?. )允许读

let arr = res && res.data && res.data.list
复制代码

等价于

let arr = res?.data?.list
复制代码

参考来源：blog.csdn.net/libie_lt/ar… 和 blog.csdn.net/u010074572/…

空值赋值运算符(??=)
```
let b = '你好';
let a = 0
let c = null;
let d = ’123‘
b ??= a;  // b = “你好”
c ??= d  // c = '123'
复制代码
```
当??=左侧的值为null、undefined的时候,才会将右侧变量的值赋值给左侧变量.其他所有值都不会进行赋值.同样在一些场景下,可以省略很多代码.

二动态添加属性

    signingForm: {},
复制代码

    //处理数据
    testDealData() {
      let newArr = [];
      let tempForm = JSON.parse(JSON.stringify(this.signingForm))
      //let num=
      let num = 0;
      tempForm["labelCount"]=this.eqbControl?.length||0;
      this.eqbControl.forEach((item, index) => {
        item.key = "chyName" + index;
        let tempObj = {};
        tempObj[`chyName${index}`] = "";
        // this.signingForm[`chyName${index}`]="";
        tempForm[`chyName${index}`] = { ...item, ...tempObj };
        // tempForm[`chyName${index}`]="";
        if (index % 2 == 0) {
          newArr.push({
            num: num,
            list: [item],
          });
        } else if (index % 2 == 1) {
          newArr[num].list.push(item);
          num = num + 1;
        }
      });
      this.tempEqbControl = newArr;
      //console.log(tempForm, "this.tempEqbControl");
      this.signingForm = JSON.parse(JSON.stringify(tempForm));

    },
复制代码

实现效果

三 vue动态创建表单字段

表单信息

  <div class="chy-box" v-show="!signingOpenShow">
            <ChyTitle title="填写合同信息"></ChyTitle>
            <div class="chy-box-card">
              <div
                class="chy-box-row"
                v-for="(item, index) in tempEqbControl"
                :key="index"
              >
                <template v-if="item.list.length % 2 == 0">
                  <div
                    class="chy-box-col"
                    v-for="(sonItem, indexSon) in item.list"
                    :key="indexSon"
                  >
                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 3"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-date-picker
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        type="date"
                        :placeholder="sonItem.label"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 1"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                       class="chy-box-col-value"
                      v-if="sonItem.type == 2"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input-number
                      v-model="signingForm[sonItem.key][sonItem.key]"
                      :min="0"
                      :precision="2" :step="0.1"
                      :controls="false"
                      style="width: 100%"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                    ></el-input-number>
                    大写 :
                  <span class="chy-amount-showtext">{{ digitUppercase(signingForm[sonItem.key][sonItem.key]) }}</span>

                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 6"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 8"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>
                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 16"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                        {
                        pattern: /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/,
                        message: '请输入正确的身份证号码',
                        trigger: 'blur',
                       },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>
                  </div>
                </template>

                <template v-else>
                  <div
                    class="chy-box-col"
                    v-for="(sonItem, indexSon) in item.list"
                    :key="indexSon"
                  >
                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 3"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-date-picker
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        type="date"
                        :placeholder="sonItem.label"
                        value-format="yyyy-MM-dd"
                        style="width: 100%"
                      >
                      </el-date-picker>
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 1"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                       class="chy-box-col-value"
                      v-if="sonItem.type == 2"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                     <el-input-number
                      v-model="signingForm[sonItem.key][sonItem.key]"
                      :min="0"
                      :precision="2" :step="0.1"
                      :controls="false"
                      style="width: 100%"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                    ></el-input-number>
                    大写 :
                  <span class="chy-amount-showtext">{{ digitUppercase(signingForm[sonItem.key][sonItem.key]) }}</span>
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 6"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 8"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>
                    <el-form-item
                      :label="sonItem.label"
                      :prop="sonItem.key"
                      v-if="sonItem.type == 16"
                      :rules="[
                        {
                          required: sonItem.required,
                          message: sonItem.label + '不能为空',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <el-input
                        v-model="signingForm[sonItem.key][sonItem.key]"
                        :placeholder="sonItem.label"
                        :disabled="signingDisabled"
                      />
                    </el-form-item>
                  </div>
                  <div class="chy-box-col"></div>
                </template>
              </div>
      </div>
复制代码

效果图

四提交处理

代码

 submitSigningForm() {
      let that = this;
      if (!this.checkForm()) {
        return;
      }
        //保存到数据库数据
      let toDbForm = {
        signCustomerInfoList: [],
        eqbTemplateId: that.signingForm.eqbTemplateId,
        simpleFormFields: [],
      };
       this.$refs["signingForm"].validate(valid => {
          if (valid) {

             let tempItem1 = {
        perName: that.signingForm.perName1,
        perMobile: that.signingForm.perMobile1,
        orgName: that.signingNum == 0 ? that.signingForm.orgName : "",
        orgCode: that.signingNum == 0 ? that.signingForm.orgCode : "",
        pin: "kh2",
      };
      toDbForm.signCustomerInfoList.push(tempItem1); //第一个人处理

      if (this.signingNum == 2 || this.signingNum == 3) {
        let tempItem2 = {
          perName: that.signingForm.perName2,
          perMobile: that.signingForm.perName2,
          orgName: "",
          orgCode: "",
          pin: "kh3",
        };
        toDbForm.signCustomerInfoList.push(tempItem2); //第二个人处理

          if (this.signingNum == 3) {
          let tempItem3 = {
            perName: that.signingForm.perName3,
            perMobile: that.signingForm.perName3,
            orgName: "",
            orgCode: "",
            pin: "kh4",
          };
          toDbForm.signCustomerInfoList.push(tempItem3); //第三个人处理
        }
      }
      if(that.signingForm.labelCount&&that.signingForm.labelCount!=0){
       for (let i=0;i<that.signingForm.labelCount;i++)
        {
          let tempFields={
              label:that.signingForm[`chyName${i}`].label,
              id:that.signingForm[`chyName${i}`].id,
              value:that.signingForm[`chyName${i}`][`chyName${i}`],
          }
          toDbForm.simpleFormFields.push(tempFields);
           // console.log(i,"i="+i);
        }
      }
     // console.log(this.signingForm, "this.signingForm");
             console.log(toDbForm, "toDbForm");
             commitChySignForm(toDbForm).then(response => {
                this.msgSuccess("操作成功");
                this.signingOpen = false;

                console.log(response.data,"response")
               // this.getList();
              });
          }
        });
    },
复制代码

前部分是学习js中几个问号的含义和用法，后部分是今天在项目中用到的几个实用技巧。也是本人第一次在项目中动态创建属性和使用。花费不少时间，所以整理出来，供大家参考。本文的重点是动态添加属性，属性在表单上展示，对应规则，以及保存到数据库中的处理。非常实用。

前端项目中几个实用技巧

一 JavaScript中各种符号用法

二动态添加属性

三 vue动态创建表单字段

四 提交处理

猜你喜欢

四提交处理