vue之ele的From表单组件的使用与二次封装

vue之ele的From表单组件的使用与二次封装

From表单组件的使用

在这里插入图片描述

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-form-item prop="date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input
          type="textarea"
          v-model="ruleForm.desc"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          提交
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    
    
  name: "Dashboard",
  components: {
    
    },
  data() {
    
    
    return {
    
    
      // form参数数据
      ruleForm: {
    
    
        name: "",
        region: "",
        date: "",
        delivery: false,
        type: [],
        desc: "",
      },
      // form对应校验规则
      rules: {
    
    
        name: [
          {
    
     required: true, message: "请输入活动名称", trigger: "blur" },
          {
    
     min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          {
    
     required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date: [{
    
     required: true, message: "请选择日期", trigger: "change" }],
        type: [
          {
    
     required: true, message: "至少选一个活动性质", trigger: "change" },
        ],
        desc: [
          {
    
     required: true, message: "请填写活动形式", trigger: "blur" },
          {
    
     max: 200, message: "长度最多200字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    
    
    // 提交
    submitForm(formName) {
    
    
      this.$refs[formName].validate((valid) => {
    
    
        if (valid) {
    
    
          console.log("确定的数据", this.ruleForm);
        } else {
    
    
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
    
    
      this.$refs[formName].resetFields();
    },
  },
};
</script>

ele的From表单组件的使用与二次封装 - 提交表单

Form.vue

<template>
  <div class="form-wrap">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <template v-for="item in ruleFormconfig">
        <!-- <slot :name="name" v-if="item.remote || item.slot"></slot> -->
        <el-form-item
          v-if="item.type == 'input'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :ref="item.prop"
        >
          <el-input
            v-model="ruleForm[item.prop]"
            :type="item.inputType"
            :placeholder="item.placeholder || '请输入'"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'select'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <!-- <el-tooltip
            effect="dark"
            :content="item.tooltip ? item.value : ''"
            placement="top"
          > -->
          <el-select
            v-model="ruleForm[item.prop]"
            :placeholder="item.placeholder || '请选择'"
            :ref="item.prop"
            :multiple="item.multiple || false"
            :collapse-tags="item.multiple || false"
            :filterable="item.filterable"
            class="collapse_class"
          >
            <el-option
              v-for="selectItem in item.options"
              :key="selectItem.value"
              :label="selectItem.label"
              :value="selectItem.value"
            ></el-option>
          </el-select>
          <!-- </el-tooltip> -->
        </el-form-item>
        <el-form-item
          v-if="item.type == 'date'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :ref="item.prop"
        >
          <el-date-picker
            :type="item.inputType || 'date'"
            :placeholder="item.placeholder || '选择日期'"
            v-model="ruleForm[item.prop]"
            :value-format="item.format || 'yyyy-MM-dd'"
            :clearable="item.clearable || true"
            :picker-options="item.pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          提交
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 表单组件 Form.vue -> props参数 与事件
/**
 * param -> 参数
 ** @param ruleForm {Object} - form参数数据 选中后的对应字段数据!
 ** @param ruleFormconfig {Object} - form参数配置 针对input的类型与标题等数据
 ** @param rules {Object} - form规则参数 针对那些需要必填与提示
 **** @param label {String} - form-item的标题
 **** @param type {String} - form-item的类型 有input、select、date等!
 **** @param prop {String} - form-item的对应的数据字段
 **** @param inputType {String} - form-item的之中input或者date里面的类型 eg:input(number等);date(date、month、daterange)
 **** @param options {Array} - form-item的select的数据 options: [{label: "苹果",value: "苹果"},{label: "香蕉",value: "香蕉"}]
 **** @param multiple {String} - form-item的select的数据 是否多选
 **** @param filterable {String} - form-item的select的数据 是否清空
 **** @param format {String} - form-item的date之中的格式化输出值 format(yyyy-MM-dd || yyyy-MM等)
 **** @param pickerOptions {String} - form-item的date之中的限制日期选择范围
 ******
   created() {
    this.disabledDate(); // 格式化
   },
   methods: {
     // 设置禁用日期
     disabledDate() {
       let now = new Date();
       let monthEndDate = new Date(
         now.getFullYear(),
         now.getMonth(),
         now.getDate()
       );
       let timeEnd = Date.parse(monthEndDate);
       // 设置当前时间截止日 必须小于日历组件的时间!
       this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
         time.getTime() > timeEnd;
     },
   },
 ******
 * event -> 事件
 ** @event submitForm {Fun} -提交事件
 ** @event resetForm {Fun} -重置事件
 */
export default {
    
    
  name: "Form",
  props: {
    
    
    ruleFormconfig: {
    
    
      type: Array,
      default() {
    
    
        return {
    
    };
      },
    },
    ruleForm: {
    
    
      type: Object,
      default() {
    
    
        return {
    
    };
      },
    },
    rules: {
    
    
      type: Object,
      default() {
    
    
        return {
    
    };
      },
    },
  },
  components: {
    
    },
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    // 提交
    submitForm(formName) {
    
    
      this.$emit("submitForm", formName);
    },
    // 重置
    resetForm(formName) {
    
    
      this.$emit("resetForm", formName);
    },
  },
};
</script>
<style  lang="scss" scoped>
.form-wrap {
    
    
}
</style>

使用Form组件

在这里插入图片描述

<template>
  <div>
    Dashboard
    <From
      :ruleFormconfig="ruleFormconfig"
      :ruleForm="ruleForm"
      :rules="rules"
      @submitForm="submitForm"
      @resetForm="resetForm"
      ref="form"
    >
    </From>

    <From
      :ruleFormconfig="ruleFormconfig2"
      :ruleForm="ruleForm2"
      :rules="rules2"
      @submitForm="submitForm2"
      @resetForm="resetForm2"
      ref="form2"
    >
    </From>
  </div>
</template>

<script>
import From from "./child/Form";
export default {
    
    
  name: "Dashboard",
  components: {
    
    
    From,
  },
  data() {
    
    
    return {
    
    
      // form 配置
      ruleFormconfig: [
        {
    
    
          label: "购买方",
          type: "input",
          prop: "name",
        },
        {
    
    
          label: "融资金额",
          type: "input",
          inputType: "number",
          prop: "money",
        },
        {
    
    
          label: "水果",
          type: "select",
          prop: "fruits",
          options: [
            {
    
    
              label: "苹果",
              value: "苹果",
            },
            {
    
    
              label: "香蕉",
              value: "香蕉",
            },
            {
    
    
              label: "菠萝",
              value: "菠萝",
            },
          ],
        },
        {
    
    
          label: "国家",
          type: "select",
          prop: "country",
          options: [
            {
    
    
              label: "中国",
              value: "中国",
            },
            {
    
    
              label: "美国",
              value: "美国",
            },
          ],
        },
        {
    
    
          label: "币种",
          type: "select",
          prop: "currency",
          multiple: true,
          filterable: true,
          options: [
            {
    
    
              label: "人民币",
              value: "CNY",
            },
            {
    
    
              label: "美元",
              value: "USD",
            },
            {
    
    
              label: "港币",
              value: "HKD",
            },
          ],
        },
        {
    
    
          label: "出书日期",
          type: "date",
          prop: "startDate",
        },
        {
    
    
          label: "结束月份",
          type: "date",
          prop: "endMonth",
          format: "yyyy-MM",
          inputType: "month",
        },
        // 第8个
        {
    
    
          label: "备份日期",
          type: "date",
          prop: "backupsDate",
          pickerOptions: {
    
    },
        },
        {
    
    
          label: "取款日期",
          type: "date",
          prop: "withdrawDate",
          inputType: "daterange",
        },
      ],
      // form参数数据
      ruleForm: {
    
    
        name: "",
        money: "",
        fruits: "",
        country: "",
        currency: "",
        startDate: "",
        endMonth: "",
        backupsDate: "",
        withdrawDate: [],
      },
      // form对应校验规则
      rules: {
    
    
        name: [
          {
    
     required: true, message: "请输入购买方", trigger: "blur" },
          {
    
     min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        money: [{
    
     required: true, message: "请输入融资金额", trigger: "blur" }],
        fruits: [{
    
     required: true, message: "请选择水果", trigger: "change" }],
        country: [{
    
     required: true, message: "请选择国家", trigger: "change" }],
      },
      // form 配置
      ruleFormconfig2: [
        {
    
    
          label: "水果",
          type: "select",
          prop: "fruits2",
          options: [
            {
    
    
              label: "苹果",
              value: "苹果",
            },
            {
    
    
              label: "香蕉",
              value: "香蕉",
            },
            {
    
    
              label: "菠萝",
              value: "菠萝",
            },
          ],
        },
      ],
      // form参数数据
      ruleForm2: {
    
    
        fruits2: "",
      },
      // form对应校验规则
      rules2: {
    
    
        fruits2: [{
    
     required: true, message: "请选择水果", trigger: "change" }],
      },
    };
  },
  created() {
    
    
    this.disabledDate(); // 格式化
  },
  methods: {
    
    
    // 提交
    submitForm(formName) {
    
    
      // console.log("form", this.$refs.form.$refs);
      this.$refs.form.$refs[formName].validate((valid) => {
    
    
        if (valid) {
    
    
          console.log("确定的数据", this.ruleForm);
        } else {
    
    
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
    
    
      this.$refs.form.$refs[formName].resetFields();
    },
    // 设置禁用日期
    disabledDate() {
    
    
      let now = new Date();
      let monthEndDate = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate()
      );
      let timeEnd = Date.parse(monthEndDate);
      // 设置当前时间截止日 必须小于日历组件的时间!
      this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
        time.getTime() > timeEnd;
    },
    // 提交2
    submitForm2(formName) {
    
    
      this.$refs.form2.$refs[formName].validate((valid) => {
    
    
        if (valid) {
    
    
          console.log("确定2的数据", this.ruleForm2);
        } else {
    
    
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置2
    resetForm2(formName) {
    
    
      this.$refs.form2.$refs[formName].resetFields();
    },
  },
};
</script>
<style  lang="scss" scoped>
// 多选的 样式调整!
.collapse_class {
    
    
  ::v-deep .el-tag {
    
    
    &:first-child {
    
    
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>

ele的From表单组件的使用与二次封装 - 查询菜单(查询重置等)

在这里插入图片描述

Form.vue

<template>
  <div class="form-wrap">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="form-wrap-con"
    >
      <template v-for="item in ruleFormconfig">
        <el-form-item
          v-if="item.type == 'input'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :ref="item.prop"
          class="input_item"
        >
          <el-input
            v-model="ruleForm[item.prop]"
            :type="item.inputType"
            :placeholder="item.placeholder || '请输入'"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'select'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          class="input_item"
        >
          <!-- <el-tooltip
            effect="dark"
            :content="item.tooltip ? item.value : ''"
            placement="top"
          > -->
          <el-select
            v-model="ruleForm[item.prop]"
            :placeholder="item.placeholder || '请选择'"
            :ref="item.prop"
            :multiple="item.multiple || false"
            :collapse-tags="item.multiple || false"
            :filterable="item.filterable"
            class="collapse_class"
          >
            <el-option
              v-for="selectItem in item.options"
              :key="selectItem.value"
              :label="selectItem.label"
              :value="selectItem.value"
            ></el-option>
          </el-select>
          <!-- </el-tooltip> -->
        </el-form-item>
        <el-form-item
          v-if="item.type == 'date'"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :ref="item.prop"
          class="input_item"
        >
          <el-date-picker
            :type="item.inputType || 'date'"
            :placeholder="item.placeholder || '选择日期'"
            v-model="ruleForm[item.prop]"
            :value-format="item.format || 'yyyy-MM-dd'"
            :clearable="item.clearable || true"
            :picker-options="item.pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </template>
      <div v-if="btnSlot" class="btnSlot_wrap">
        <slot class="btnSlot" name="btnSlotName"></slot>
      </div>
      <el-form-item v-else>
        <el-button type="primary" @click="submitForm('ruleForm')">
          提交
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 表单组件 Form.vue -> props参数 与事件
/**
 * param -> 参数
 ** @param ruleForm {Object} - form参数数据 选中后的对应字段数据!
 ** @param ruleFormconfig {Object} - form参数配置 针对input的类型与标题等数据
 ** @param rules {Object} - form规则参数 针对那些需要必填与提示
 **** @param label {String} - form-item的标题
 **** @param type {String} - form-item的类型 有input、select、date等!
 **** @param prop {String} - form-item的对应的数据字段
 **** @param inputType {String} - form-item的之中input或者date里面的类型 eg:input(number等);date(date、month、daterange)
 **** @param options {Array} - form-item的select的数据 options: [{label: "苹果",value: "苹果"},{label: "香蕉",value: "香蕉"}]
 **** @param multiple {String} - form-item的select的数据 是否多选
 **** @param filterable {String} - form-item的select的数据 是否清空
 **** @param format {String} - form-item的date之中的格式化输出值 format(yyyy-MM-dd || yyyy-MM等)
 **** @param pickerOptions {String} - form-item的date之中的限制日期选择范围
 ****** eg:
   created() {
    this.disabledDate(); // 格式化
   },
   methods: {
     // 设置禁用日期
     disabledDate() {
       let now = new Date();
       let monthEndDate = new Date(
         now.getFullYear(),
         now.getMonth(),
         now.getDate()
       );
       let timeEnd = Date.parse(monthEndDate);
       // 设置当前时间截止日 必须小于日历组件的时间!
       this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
         time.getTime() > timeEnd;
     },
   },
 ******
 **** @param btnSlot {Boolean} - 是否使用插槽
 ****** eg:
	<el-button slot="btnSlotName" @click="search2">查询2</el-button>
 ******
 * event -> 事件
 ** @event submitForm {Fun} -提交事件
 ** @event resetForm {Fun} -重置事件
 */
export default {
    
    
  name: "Form",
  props: {
    
    
    ruleFormconfig: {
    
    
      type: Array,
      default() {
    
    
        return {
    
    };
      },
    },
    ruleForm: {
    
    
      type: Object,
      default() {
    
    
        return {
    
    };
      },
    },
    rules: {
    
    
      type: Object,
      default() {
    
    
        return {
    
    };
      },
    },
    btnSlot: {
    
    
      type: Boolean,
      default: false,
    },
  },
  components: {
    
    },
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    // 提交
    submitForm(formName) {
    
    
      this.$emit("submitForm", formName);
    },
    // 重置
    resetForm(formName) {
    
    
      this.$emit("resetForm", formName);
    },
  },
};
</script>
<style  lang="scss" scoped>
.form-wrap {
    
    
  .form-wrap-con {
    
    
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .input_item {
    
    
      width: 25%;
      margin-bottom: 15px;
      // 设置item的高度与下边距
      ::v-deep .el-input__inner,
      ::v-deep .el-input--suffix {
    
    
        height: 34px !important;
        line-height: 34px !important;
      }

      // 设置日期input内部宽度、下拉菜单
      ::v-deep .el-date-editor.el-input,
      .el-date-editor.el-input__inner,
      ::v-deep .el-select {
    
    
        width: 100%;
      }
    }
    .btnSlot_wrap {
    
    
      position: absolute;
      right: 0px;
      bottom: -25px;
      // background: #e5e5e5;
      padding-right: 30px;
    }
  }
}
</style>

使用Form.vue

<template>
  <div class="dashboard">
    Dashboard
    <From
      :ruleFormconfig="ruleFormconfig"
      :ruleForm="ruleForm"
      ref="form"
      :btnSlot="true"
    >
      <el-button slot="btnSlotName" @click="search">查询</el-button>
      <el-button slot="btnSlotName" @click="reset">重置</el-button>
    </From>

    <From
      :ruleFormconfig="ruleFormconfig2"
      :ruleForm="ruleForm2"
      ref="form2"
      :btnSlot="true"
    >
      <el-button slot="btnSlotName" @click="search2">查询2</el-button>
      <el-button slot="btnSlotName" @click="reset2">重置2</el-button>
    </From>
  </div>
</template>

<script>
import From from "./child/Form";
export default {
    
    
  name: "Dashboard",
  components: {
    
    
    From,
  },
  data() {
    
    
    return {
    
    
      // form 配置
      ruleFormconfig: [
        {
    
    
          label: "购买方",
          type: "input",
          prop: "name",
        },
        {
    
    
          label: "融资金额",
          type: "input",
          inputType: "number",
          prop: "money",
        },
        {
    
    
          label: "水果",
          type: "select",
          prop: "fruits",
          options: [
            {
    
    
              label: "苹果",
              value: "苹果",
            },
            {
    
    
              label: "香蕉",
              value: "香蕉",
            },
            {
    
    
              label: "菠萝",
              value: "菠萝",
            },
          ],
        },
        {
    
    
          label: "国家",
          type: "select",
          prop: "country",
          options: [
            {
    
    
              label: "中国",
              value: "中国",
            },
            {
    
    
              label: "美国",
              value: "美国",
            },
          ],
        },
        {
    
    
          label: "币种",
          type: "select",
          prop: "currency",
          multiple: true,
          filterable: true,
          options: [
            {
    
    
              label: "人民币",
              value: "CNY",
            },
            {
    
    
              label: "美元",
              value: "USD",
            },
            {
    
    
              label: "港币",
              value: "HKD",
            },
          ],
        },
        {
    
    
          label: "出书日期",
          type: "date",
          prop: "startDate",
        },
        {
    
    
          label: "结束月份",
          type: "date",
          prop: "endMonth",
          format: "yyyy-MM",
          inputType: "month",
        },
        // 第8个
        {
    
    
          label: "备份日期",
          type: "date",
          prop: "backupsDate",
          pickerOptions: {
    
    },
        },
        {
    
    
          label: "取款日期",
          type: "date",
          prop: "withdrawDate",
          inputType: "daterange",
        },
      ],
      // form参数数据
      ruleForm: {
    
    
        name: "",
        money: "",
        fruits: "",
        country: "",
        currency: "",
        startDate: "",
        endMonth: "",
        backupsDate: "",
        withdrawDate: [],
      },
      // form2 配置
      ruleFormconfig2: [
        {
    
    
          label: "购买方",
          type: "input",
          prop: "name2",
        },
      ],
      // form参数数据2
      ruleForm2: {
    
    
        name2: "",
      },
    };
  },
  created() {
    
    
    this.disabledDate(); // 格式化
  },
  methods: {
    
    
    // 查询
    search() {
    
    
      this.$refs.form.$refs.ruleForm.validate(() => {
    
    
        // valid 有必填的时候 需要规则校验!
        console.log("确定的数据", this.ruleForm);
        // if (valid) {
    
    
        //   console.log("确定的数据", this.ruleForm);
        // } else {
    
    
        //   console.log("error submit!!");
        //   return false;
        // }
      });
    },
    // 重置
    reset() {
    
    
      console.log("重置");
      this.$refs.form.$refs.ruleForm.resetFields();
    },
    // 查询2
    search2() {
    
    
      this.$refs.form2.$refs.ruleForm.validate(() => {
    
    
        // valid 有必填的时候 需要规则校验!
        console.log("确定的数据2", this.ruleForm2);
      });
    },
    // 重置2
    reset2() {
    
    
      console.log("重置2");
      this.$refs.form2.$refs.ruleForm.resetFields();
    },

    // 设置禁用日期
    disabledDate() {
    
    
      let now = new Date();
      let monthEndDate = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate()
      );
      let timeEnd = Date.parse(monthEndDate);
      // 设置当前时间截止日 必须小于日历组件的时间!
      this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
        time.getTime() > timeEnd;
    },
  },
};
</script>
<style  lang="scss" scoped>
.dashboard {
    
    
  // 多选的 样式调整!
  .collapse_class {
    
    
    ::v-deep .el-tag {
    
    
      &:first-child {
    
    
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>

猜你喜欢

转载自blog.csdn.net/weixin_47409897/article/details/122579505