Elemnt ui 组件封装(form)

<template>
  <el-form
    class="form"
    :inline="formConfig.inline"
    :model="value"
    :label-width="formConfig.labelWidth"
    :rules="rules"
    :ref="refString"
    :size="formConfig.size"
  >
    <slot name="formItem" />
    <el-form-item
      v-for="(item, index) in formConfig.formItemList"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :width="formConfig.width"
    >
      <el-input
        v-if="item.type == 'input'"
        v-model="value[item.prop]"
        :disabled="item.disabled"
        :clearable="true"
        :placeholder="item.placeholder"
      ></el-input>
      <el-select
        :clearable="true"
        v-else-if="item.type == 'select'"
        v-model="value[item.prop]"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        @change="item.select"
      >
        <el-option
          v-for="(optItem, index) in item.optList"
          :key="index"
          :label="optItem.label"
          :value="optItem.value"
        ></el-option>
      </el-select>
      <el-date-picker
        :value-format="item.dateFormate"
        v-else
        v-model="value[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :clearable="true"
        :placeholder="item.label"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
    </el-form-item>
    <div class="searchBtn">
      <el-button-group>
        <el-button
          class="btn"
          v-for="(item, index) in formConfig.operate"
          :key="index"
          :size="item.size"
          :type="item.type"
          :icon="item.icon"
          @click="item.handleClick(value)"
          >{{ item.name }}
        </el-button>
      </el-button-group>
      <slot name="operate"></slot>
    </div>
  </el-form>
</template>
<script>
export default {
  components: {},
  props: {
    formConfig: {
      type: Object,
      required: true,
    },
    value: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
    },
    refString: {
      type: String
    }
  },
  computed: {},
  methods: {
    setDefaultValue() {
      // 设置默认值
      this.formConfig.formItemList.forEach(({ key, itemValue }) => {
        if (value[key] === undefined || value[key] === null) {
          this.$set(value,key,itemValue);
        }
      });
    },
    _forceUpdate() {
      this.$forceUpdate();
    }
  },
  mounted() {
    this.setDefaultValue();
  },
};
</script>

<style lang="scss" scoped>
.form {
  min-width: 300px;
}

.searchBtn {
  .btn {
    margin-left: 20px;
  }
}
</style>

formConfig配置

formConfig: {
        inline: true,
        size: "normal",
        labelWidth: '100',
        width: '180',
        formItemList: [
          {label: '商品名称',prop: 'name',type: 'input', placeholder: '请输入商品名称'},
          {label: '进价',prop: 'incode',type: 'input', placeholder: '请输入进价'},
          {label: '售价',prop: 'expend',type: 'input', placeholder: '请输入售价'},
          {label: '库存数量',prop: 'number',type: 'input', placeholder: '请输入库存数量'},
          {label: '商品描述',prop: 'remark',type: 'input', placeholder: '请输入商品描述'},
          {label: '供应商',prop: 'resource',type: 'input', placeholder: '请输入供应商'}
        ],
        operate: [
          {type: 'primary',icon: '',name: '取消',size: 'normal',handleClick: function() {}},
          {type: 'primary',icon: '',name: '确定',size: 'normal',handleClick: (form) => {
            this.handleSubmit(form);
          }},
        ]
      }

本文作者:ajajaz

本文链接:https://www.cnblogs.com/guozhiqiang/p/16012211.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   ajajaz  阅读(114)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起