way-el-form v0.1.0

way-el-form

基于elementUI 封装的 JSON To Form 轻量化表单组件，支持 Search 和 Form 两种模式

Example: https://mlzk.github.io/way-el-form/

Install

npm install way-el-form --save

Usage

// main.js
// ...引入vue和iview之后
// 引入组件库
import WayElForm from "way-el-form";
import "way-el-form/dist/way-el-form.css";
Vue.use(WayElForm);

run demo

npm run serve

写的比较简单，具体使用看demo实现的效果

参数说明

Props

form

type 可选类型

理论上末级组件都可以作为表单项（通过props设置的均可，slot配置的暂不支持）Title为特殊组件，用于分组；

!> 理论上其他框架的组件也可以作为表单项，只要支持v-model即可

! Title/Upload 额外有slot选项

rules

参考：

              [{
              message: '装完时间不能大于卸完时间',
                trigger: 'change',
                validator: this.validateShiftLoadAndDumpTime
              },
              ....,
              {
                required: true,
                message: '请输入正整数',
                trigger: ['change'],
                pattern: /^[1-9]\d*$/
              }]

source

data

参考：

//默认使用label和value也可以通过设置showValue和showName修改keyName
[
  ({
    label: "是",
    value: true,
  },
  {
    label: "否",
    value: false,
  }),
];

actionProps

示例：

// 重写默认的搜索重置按钮
   actionProps: {
        submit: {
          componentsProps: {
            type: 'primary',
            icon: 'md-search',
          },
          text: '查询'
        },
        reset: {
         componentsProps: {
            type: 'default',
            icon: 'md-refresh',
          },
          text: '重置'
        },
      },

//配合aciton 增加新的按钮
action: ['submit', 'reset', 'add'],
actionProps: {

  add: {
    componentsProps: {
      type: 'primary',
      icon: 'md-add',
    },
    compoentsEvents: {
      'on-click': () => {
        this.$router.push({
          path: '/add',
        })
      },
    },
    text: '新增'
  },
},

formProps

elementUI form 的全量配置 参考链接：https://element.eleme.cn/#/zh-CN/component/form

formItemProps

elementUI form-item 的全量配置 参考链接：https://element.eleme.cn/#/zh-CN/component/form

footerRowProps

elementUI row 的全量配置 参考链接：https://element.eleme.cn/#/zh-CN/component/layout

事件

formData 参数

方法

场景一:联动查询

        {
      name: '设备类型',
      type: 'el-elect',
      key: 'deviceType',
      componentsProps: {
        clearable: true,
        filterable: true,
        'label-in-value': true,
      },
      componentsEvents: {
        'on-change': (val) => {
          this.getDevices()
        }
      },
      source: {
        data: [
          {
            id: '1',
            name: '运输设备'
          },
          {
            id: '2',
            name: '挖掘设备'
          },
          {
            id: '3',
            name: '卸载设备'
          },
          {
            id: '4',
            name: '其它车辆'
          },
        ]
      },
      showName: 'name',
      showValue: 'id',
    },    {
      name: '设备编号',
      type: 'el-select',
      key: 'equipmentId',

      componentsProps: {
        filterable: true,
        'label-in-value': true,
        clearable: true,
      },
      componentsEvents: {
        'on-change': (val) => {
          if (val && val.label) {
            this.$refs.queryForm.formValues['truckDriverName'] = val.label
          }
        }
      },
      source: {
        api: 'vehicleList',
        params: {
          limit: 2000,
          type: 1
        },
        handle: function (res) {
          return res.page.list
        },
      },
      showName: 'deviceName',
      showValue: 'equipmentId',
    },

在上面的场景中设备编号的数据源需要通过设备类型来筛选，所以在设备类型的 change 事件中调用 getDevices 方法来更新筛选后的设备编号数据源

// 获取设备
getDevices() {
    // 通过ref 获取当前表单的值
    const { manufacturerName, deviceType } = this.$refs.queryForm.formValues
    // 更新设备编号的数据源的筛选条件
    this.originData.find(item => item.key === 'equipmentId').source.params = {
      limit: 2000,
      manufacturer: manufacturerName,
      deviceType: deviceType
    }
    // 手动更新数据源
    this.$refs.queryForm.updateSources('equipmentId')
  },

Feature

• 兼容CheckBoxButton