element-ui form表单，table二次封装

使用方法  npm  i  zx-lib -S

element-ui form表单，table二次封装

表单中现在 封装了如图所示的这些组件，组件只是将elemen中的组件进行了封装，方便使用，

form中预留slot插槽，可以根据自己需要，放置不同组件，使用如下：

---

用法详解

• form 采用了el-row el-col 布局     formCols形式为[ [    ] ,[      ] ,[     ]   ]  ，每个中括号代表一行

• eType 代表类型        noSohw 代表是否展示     span 代表  占比

• 其中  checkbox   radio  select   添加options 属性  option可以为options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}], options: '手机,电脑', options: ['手机', '电脑']

• 表单中的change以及click事件会统一发送出来 可自行根据prop 的值来分别处理，当 prop 为submit 时会校验rule  当prop 为reset时，会清空数据，还原初始值

• 可以通过this.$refs 设置里面字段值

  //设置是否展示
    setNoShow(prop, value) {
      this.setNewValue(prop, "noShow", value)
    },
    //设置radio checkbox options值
    setOptions(prop, value) {
      this.setNewValue(prop, "options", value)
    },
    /**
     * 改变二维数组中某个值
     * @param prop        数组中唯一标识值
     * @param key         需要修改的字段
     * @param value        需要修改的值
     */
    setNewValue(prop, key, value) {
      let two = -1;
      let one = this.formCols.findIndex(item => {
        let iIndex = item.findIndex(iItem => {
          return iItem.prop === prop
        })
        if (iIndex !== -1) {
          two = iIndex
          return true
        }
      })
      if (one === -1 || two === -1) {
        console.log('找不到要设置的字段')
        return
      }
      this.$set(this.formCols[one][two], key, value)
    }
复制代码

      formCols: [
        [
          {
            eType: 'Input',
            placeholder: "请输入姓名",
            label: "Input",
            prop: 'name1',
            noShow: false,
            span: 6,
            suffixIcon: "el-icon-eleme"
          },
          {eType: 'slot', label: "自定义slot", slotName: "test", prop: 'date5', span: 6,},
          {
            eType: 'Radio',
            label: "Radio",
            options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}],
            prop: 'date10',
            span: 6,
          },
          {
            eType: 'RadioButton',
            label: "RadioButton",
            options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}],
            prop: 'date11',
            span: 6,
          },
        ],
        [
          {
            eType: 'InputNumber',
            label: "InputNumber",
            prop: 'date16',
            span: 6,
          },
          {
            eType: 'CheckButton',
            label: "CheckButton",
            noShow: false,
            // options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}],
            // options: '手机,电脑',
            options: ['手机', '电脑'],
            prop: 'date15',
            span: 6,
          },
          {
            eType: 'Check',
            label: "CheckBox",
            // options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}],
            options: '手机,电脑',
            prop: 'date13',
            span: 6,
          },
          {
            eType: 'DatePicker',
            type: 'year',
            label: "year",
            valueFormat: "yyyy",
            prop: 'date18',
            span: 6,
          },
        ],
        [
          {
            eType: 'Select',
            label: "Select",
            options: [{label: "手机", value: "0"}, {label: "电脑", value: "1"}],
            prop: 'date17',
            span: 6,
          },
          {
            eType: 'DatePicker',
            type: 'date',
            label: "date",
            valueFormat: "yyyy-MM-dd",
            prop: 'date19',
            span: 6,
          },
          {
            eType: 'DatePicker',
            type: 'datetime',
            label: "datetime",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            prop: 'date20',
            span: 6,
          },
        ],
        [
          {
            eType: 'DatePicker',
            type: 'daterange',
            label: "daterange",
            valueFormat: "yyyy-MM-dd",
            prop: 'date21',
            span: 6,
          },
          {
            eType: 'DatePicker',
            type: 'datetimerange',
            label: "datetimerange",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            prop: 'date22',
            span: 6,
          },
          {
            eType: 'DatePicker',
            type: 'dates',
            label: "dates",
            valueFormat: "yyyy-MM-dd",
            prop: 'date23',
            span: 6,
          },
          {
            eType: 'TimePicker',
            label: "TimePicker",
            prop: 'date24',
            noShow: false,
            span: 6,
          },
        ],
        [
          {
            eType: 'Switch',
            label: "Switch",
            prop: 'date25',
            span: 6,
          },
          {
            eType: 'Slider',
            label: "Slider",
            prop: 'date26',
            noShow: false,
            span: 12,
          },
 
        ],
        [{eType: 'Button', value: "提交", type: "success", prop: 'submit', span: 2,},
          {eType: 'Button', value: "重置", type: "success", prop: 'reset', span: 2,}]
      ],
复制代码