element清除表单验证单独校验 elementui表单校验规则

转载

mob6454cc7acbf7 2024-07-04 11:56:58

文章标签 element清除表单验证单独校验 vue 表单 ico form表单 文章分类 机器学习人工智能

element清除表单验证单独校验 elementui表单校验规则_表单

电商平台分润功能：

this.$set(对象，属性名，属性值)
form表单校验 :rules=“rules” 与prop的合用，表单validate提交
阿里巴巴矢量图标库的引入及使用
el-dialog弹窗

el-dialog弹窗

element清除表单验证单独校验 elementui表单校验规则_element清除表单验证单独校验_02

佣金按钮如上图：

弹窗代码如下：

// title:弹簧标题  visible.sync 同步的显示与隐藏 width:弹窗宽度  :before-close：关闭弹窗之前执行的函数
<el-dialog title="分润信息" :visible.sync="yongjinFlag" width="500px" :before-close="MoneyCancel">
// el-form ref相当于表单的class类名，用于获取form :model=""表单的数据集合 lable-width:表单中标签的宽度 rules就是表单校验规则
  <el-form ref="MoneyForm" :model="MoneyForm" label-width="80px" :rules="Moneyrules">
  // label就是此行的标签  prop跟rules表单校验规则相配合，才可以实现
    <el-form-item label="佣金方式" prop="profitType">
    //这个地方很容易出错，select中v-model绑定的数据是option中的value，但是option展示出来的是label，因此可以写一个数组，然后通过v-for遍历数组，label是数组的每一项，value是数组的索引
      <el-select v-model="MoneyForm.profitType" placeholder="请选择佣金方式">
        <el-option
          v-for="(item,index) in MoneyTypeList"
          :key="item"
          :label="item"
          :value="index" />
      </el-select>
    </el-form-item>
    <el-form-item label="佣金" prop="ratio">
    //el-input可以通过行间设置style=""的形式来设置宽度
      <el-input v-model.number="MoneyForm.ratio" style="width:300px;" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="MoneyEnter">确定</el-button>
      <el-button @click="MoneyCancel">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

element清除表单验证单独校验 elementui表单校验规则_表单_03

data(){
	return{
	//弹窗的显示与隐藏
	  yongjinFlag: false,
	  //弹窗中form表单的数据集合
      MoneyForm: {},
      //弹窗中form表单中的佣金方式是个遍历数组
      MoneyTypeList: ["价格百分比", "固定金额"],
      //表单校验规则
      Moneyrules: {
        profitType: [
          { required: true, message: "请选择佣金方式", trigger: "change" }
        ],
        ratio: [
          { required: true, message: "请输入佣金", trigger: "blur" }
        ]
      },
	}
}

form表单规则校验及this.$set的使用

函数部分如下：

//表单提交函数
MoneyEnter() {
  console.log(this.MoneyForm);
  console.log(typeof this.MoneyForm.ratio);
  // 通过this.$refs.表单类名ref类名的方式获取到此表单，然后通过validate函数来进行表单的校验，如果能够满足校验规则，则参数vaild为true,否则为false。
  this.$refs.MoneyForm.validate((valid) => {
    if (valid) {
    // ratio参数类型需要是number ，通过 typeof 来进行类型的判断
      if (typeof this.MoneyForm.ratio !== "number") {
      //element ui中的弹窗提示，type是类型
        this.$message({
          message: "佣金金额需要是数字类型",
          type: "warning"
        });
        return;
      }
      //当this.MoneyForm.profitType = 0时，代表佣金方式为百分比形式，则结果必须介于0-100之间。
      if (this.MoneyForm.profitType === 0) {
        if (this.MoneyForm.ratio < 0 || this.MoneyForm.ratio > 100) {
          this.$message({
            message: "佣金金额设置无效",
            type: "warning"
          });
          return;
        }
      }
      //Object.assign可以进行对象的拼接
      let param = Object.assign(this.MoneyForm, { "targetType": 0, "status": 1, "targetId": this.categoryId });
      console.log("要设置的参数", param);
      setProfit(param).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "佣金分润设置成功",
            type: "success"
          });
          this.yongjinFlag = false;
          this.categoryId = undefined;
          this.MoneyForm = {};
        }
      });
    }
  });
},
// 直接关闭弹窗 所有内容置空
MoneyCancel() {
  this.yongjinFlag = false;
  this.categoryId = undefined;
  this.MoneyForm = {};
},
// 弹窗展示的时候，需要先进行佣金信息的获取，如果获取成功，分为两种情况，一种是有数据，则数据渲染到页面中，如果是空数据，则设定一个默认值
handleMoney(data) {
  let params = {
    "targetId": data.id,
    "targetType": 0,
    "status": 1
  };
  queryProfit(params).then(res => {
    if (res.code === 200) {
      this.categoryId = data.id;
      this.yongjinFlag = !this.yongjinFlag;
      if (res.result.length !== 0) {
      //获取到数据后，需要渲染页面，如果用下方注释的两行代码，则页面不会实时刷新
        // this.MoneyForm.profitType = res.result[0].profitType;
        // this.MoneyForm.ratio = res.result[0].ratio;
        //通过this.$set的方式进行页面的渲染
        this.$set(this.MoneyForm, "profitType", res.result[0].profitType);
        this.$set(this.MoneyForm, "ratio", res.result[0].ratio);
        console.log("接收的数据", this.MoneyForm);
      } else {
        this.$set(this.MoneyForm, "profitType", 0);
        this.$set(this.MoneyForm, "ratio", 0.0);
      }
    } else {
      this.yongjinFlag = false;
      this.categoryId = undefined;
      this.MoneyForm = {};
    }
  });
},