安装

npm i lform

main.js中使用

// 全局注册组件
import LForm from 'lform'
Vue.use(LForm)
# 页面中使用
     <lform
      title="编辑"
      ref="LWForm"
      :LWFormData="LWFormData"
      :LWFormList="LWFormList"
      :rules="rules"
      :searchOpera="searchOpera"
      :showDialog="showDialog"
      :isBtn="isBtn"
    ></lform>
# 参数描述
 // 下拉数据
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      // 是否显示提示弹窗
      showDialog: false,
      // 是否显示操作按钮
      isBtn:true,
     // 校验规则
      rules: {
        name: [
          { required: true, message: "请输入贡献值名称", trigger: "blur" },
          { min:5, max: 20, message: "长度在5-20个字符以内", trigger: "blur" },
        ],
        steep: [
          { required: true, message: "请选择贡献值分值", trigger: "change" },
        ],
        role: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个角色",
            trigger: "change",
          },
        ],
        desc: [
          { required: true, message: "请填写贡献值描述", trigger: "blur" },
        ],
      },
     // 表单数据
      LWFormData: {
        name: "",
        desc: "",
        steep: 1,
        role: [],
      },
      // 循环遍历
      LWFormList: [
        {
          # 关联表单校验
          prop: "name",
          # 标签名称
          label: "贡献值名称",
          # 类型
          type: "input",
          # 参数value值
          value: "",
          #是否禁用
          Lwdisabled:true
        },
        {
          prop: "desc",
          label: "贡献值描述",
          type: "textvalue",
          value: "",
          rules: ["required"],
        },
        { prop: "steep", value: "", label: "贡献值分值", type: "steep" },
        {
          prop: "role",
          label: "贡献值使用角色",
          type: "checkbox",
          value: [],
          options: [
            { label: "专家志愿者", value: 1 },
            { label: "医护志愿者", value: 2 },
            { label: "社会志愿者", value: 2 },
          ],
        },
      ],
      //按钮
      searchOpera: [
        {
          label: "取消",
          type: "info",
          size: "small",
          clickEvent: this.Btncance,
        },
        { label: "保存", type: "primary",param:2, size: "small", clickEvent: this.editClick },
      ],