way-el-form

Install

Usage

run demo

参数说明

Props

form

type 可选类型

rules

source

参数名称	类型	是否必选	说明
requestFunction	async function		获取数据的异步函数
params	object		数据源的 API 接口静态参数
handle	function		数据源的处理函数，第一个参数为接口返回的数据,第二个参数为请求参数，第三个参数是 form
effectKeys	array		form 中设置为请求参数的 key 集合，
effectKeysHandle	function		effectKeys 参数值的处理函数返回值作为请求方法的参数

| data | array | | 手动设置的数据源的数据（配合 showName/showValue）requestFunction 的优先级高于 data 设置的数据 |

注意：api 参数已弃用

data

参考：

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

actionProps

参数名称	类型	是否必选	说明
componentsProps	object		按钮组件的 props 配置，如 'type'、'size'、'icon' 等
componentsEvents	object		按钮组件的事件，如 'on-click' 等
text	string		按钮的文字

示例：

// 重写默认的搜索重置按钮
   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,
      },
      effectKeys:['equipmentId'],
      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,
      },
      source: {
        requestFunction: 'vehicleList',
        params: {
          limit: 2000,
        },
        effectKeys:['deviceType']
        handle: function (res) {
          return res.page.list
        },
      },
      showName: 'deviceName',
      showValue: 'equipmentId',
    },

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

// 获取设备
getDevices() {
    this.$refs.queryForm.updateSources('equipmentId')
  },