dream2023 / vue-ele-form Goto Github PK

element相关内容： https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

这个类型的表单应该经常会用到，希望作者能加入，谢谢

有没有计划支持antd vue？

环境是node 10.16.1
mac下

Feature request（新功能建议）

目前没有加上headers

文档里只看到node环境中的用法，没看到浏览器环境中直接用的使用说明。

希望增加一个多文件上传组件

希望能可以自己增加几个按钮，现在就确定、返回太少了。重置、取消都没有。能自己像字段一样添加就好了。

组件写的很棒！发现一个小问题，element的date-picker组件是可以通过type设置组件类型，比如月，周什么的，目前好像这样写无效

create_time: {
     type: "date",
     label: "创建时间（年月）",
     attrs: {
             type: "month"
     }
},

请问下不用自带的按钮，而是外部的按钮，能不能触发表单验证，获得表单的数据进行提交？我看到文档没有相关说明。

问题描述

日期时间类型中 attrs 指定了 value-format 属性，但还是返回时间戳

复现步骤

点击链接查看复现 demo：链接

请问怎么关掉 对json数据的自动排序功能

原因

• 我录入数据后存到后台，然后在从后台拿出来的时候顺序就变了，因为进行了自动排序
  希望我能关掉这个自动排序，或者让这个功能变成可控的

Bug report（问题描述）

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version:
• ElementUI version:
• vue-ele-form version:

Bug report（问题描述）

dialog模式下change时验证上次内容

Steps to reproduce（问题复现步骤）

<ele-form-dialog v-model="formData" :visible="true" :formDesc="formDesc" />
formData: {},
formDesc: { username: { label: "用户名称", type: "input", required: true, layout: 12, }, }

Screenshot or Gif（截图或动态图）

https://s1.ax1x.com/2020/05/08/YumpBF.gif

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version: 2.6.11
• ElementUI version: 2.13.1
• vue-ele-form version: 0.8.24

请将 eleformgroup.vue 改为这样，增加 vif 联动属性， 增加ele-form子组件的ref,去掉ele-form的v-if隐藏，便于提交时验证所有的form.。
<el-tab-pane :key="item.groupId" :label="item.groupLabel" :name="item.groupId" v-for="item of computedGroups" v-if="item.vif == null || item.vif(item.form.formData)" > <ele-form :ref="item.groupId" v-bind="item.form" <! ------请删除 v-if="item.groupId === currentGroupId" ----> v-on="item.on" >

Bug report（问题描述）

按照以下配置进行配置之后报错，图片是能够正常上传的

        logo: {
          label: "上传图标",
          required: true,
          type: "image-uploader",
          attrs: {
            drag: true,
            fileType: [],
            action: "http://localhost:3000/api/file/upload",
            data: {
              token:""
            }
          }
        }

Screenshot or Gif（截图或动态图）

当表单提交时，如果有错误，会显示一个错误提示框！这个框有两个问题。

1. 如果没有注册 全局方法 $notify ， 后台开发人员工具会提示错误警告，前台看不到提示弹出框。采用按需加载element组件时， 需要手动注册
   Vue.component(Notification)
   Vue.prototype.$notify = Notification;
   2， 弹出的对话框，标题title固定死了 '表单填写错误'，还是中文的! 建议去掉，或者可以在外面自定义设置。
2. 建议vue-ele-form固定的地方都搞成自定义，不太方便的话，内部使用的话，请用英文！
   我的QQ 2810923 微信 13986759836

参考代码如下：
EleForm.vue
// 显示错误
showError (messageArr) {
if (messageArr.length) {
const h = this.$createElement
messageArr = messageArr.map(msg => {
return h('div', { style: { marginBottom: '8px' } }, msg)
})
this.$notify.error({
title: '表单填写错误',
message: h('div', { style: { minWidth: '300px', marginTop: '12px' } }, messageArr)
})
}
},

EleForm.vue:
<el-form
:label-position="labelPosition"
:label-width="labelWidth + 'px'"
:model="formData"
:rules="rules"
@submit.native.prevent="handleValidateForm"
ref="form"
>

调用方法
<ele-form
:isShowBackBtn="false"
:submitBtnText="$t('message.login')"
labelPosition="left"
:labelWidth="0"
:rules="rules"
:form-desc="formDesc"
:form-data="formData"
:request-fn="handleRequest"
@request-success="handleRequestSuccess"
>

本地项目使用webpack编译，编译后运行报错
Uncaught SyntaxError: Unexpected identifier
at Object../node_modules/vue-ele-form/lib/index.js (frame.js:60)
at t (shared.js:1)
at Object.eval (eval at 0 (frame.js:1), :42:19)
at eval (eval at 0 (frame.js:1), :114:30)
at Object.0 (frame.js:1)
at t (shared.js:1)
at window.webpackJsonp (shared.js:1)
at frame.js:1

Feature request（新功能建议）

<el-tab-pane :key="item.groupId" :label="item.groupLabel" :name="item.groupId" v-for="item of computedGroups" v-if="item.vif == null || item.vif(item.form.formData, item.form.formData[field])" >
EleFormGroup.vue.txt

select: {
          type: 'select',
          label: 'test',
          attrs: {
            remote: true,
            "remote-method": this.getOptions
          }
}


 async getOptions (q) {
      const result = await fetch('http://jsonplaceholder.typicode.com/users')
        .then(function (res) {
          return res.json()
        }).then((resOptions) => {
          let options = []
          resOptions.forEach(item => {
            options.push({ value: item.id, text: item.name })
          })
          for (let i = 0; i < this.sum; i++) {
            options.push({ value: i, text: i })
          }
          this.sum++
          return options
        })
     // 如何把result 返回到options？？
    }

如何想ele 官网一样使用 远程搜索？？ https://element.eleme.cn/#/zh-CN/component/select
或者提供其他方式更新options

[Vue warn]: Error in beforeDestroy hook: "Error: [ElementForm]unpected width " found in ---> at packages/form/src/label-wrap.vue at packages/form/src/form-item.vue at packages/form/src/form.vue at node_modules/vue-ele-form/lib/EleForm.vue at packages/tabs/src/tab-pane.vue at packages/tabs/src/tabs.vue at node_modules/vue-ele-form/lib/EleFormGroup.vue at packages/dialog/src/component.vue at src/components/OptionsDialog.vue at src/views/Server.vue at packages/main/src/main.vue at packages/container/src/main.vue... (1 recursive calls) at src/views/Home.vue at src/App.vue

Bug report（问题描述）

select option为API时，初始化表单会触发表单验证

Steps to reproduce（问题复现步骤）

"formDesc":{ "value":{ "title":{ "label":"取消退费", "type":"input", "required":true }, "test":{ "options":"http://localhost:3000/optionList", "label":"远程选择器", "type":"select" } } },

<ele-form :options-fn="$axios.get" :formDesc="formDesc" v-model="formData" :request-fn="handleRequest" @request-success="handleRequestSuccess" > </ele-form>

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version: 2.5.17
• ElementUI version: 2.12.0
• vue-ele-form version: 0.8.24

data 数据如下：

版本：^0.3.19

     formData: {
        qiyeleixing: '1'
      },
      formConfig: {
        qiyeleixing: {
          type: 'select',
          label: '企业类型',
          layout: 12,
          attrs: {
            multiple: true
          },
          options: [{ text: '1', value: '1' }, { text: '2', value: '2' }]
        }
      }

报错信息如下：

你好大佬，请问下这里面的图片和视频等文件上传组件，是否支持使用node-express框架构建的服务端后台用formidable.js模块实现上传的图片或视频等文件数据的解析？也即图片上传组件是否是通过二进制数据格式向后台发送的数据？

能否支持Tabs 标签页？把复杂的表单分类分页显示。
这个用表单项具名插槽也做不到。

文档中的group分组代码,切换tab会出错

请问下，可以给表单载入默认数据吗？

例如在最初展示表单时候，对于每一个text，selection等，都从服务器获取的json文件中初始化成默认值，然后用户可以在这个基础上编辑。

谢谢。

form-desc 属性接收一个对象，没办法对表单项进行排序，像 field 为 1， 会自动变成第一位， 请问以后考虑添加一个排序属性吗？

Question（提问）

表单验证的添加思路是什么样的

Bug report（问题描述）

基于vue-admin-template项目, 在使用ele-form-dialog组件时，通过computed属性为ele-form-dialog的某个select字段options赋值，运行时下拉组件显示'无数据’

Steps to reproduce（问题复现步骤）

代码样例如下

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >新建用户</el-button>
    </div>

    <ele-form-dialog
      v-model="dialogForm.formData"
      :form-desc="dialogForm.formDesc"
      :is-loading="dialogForm.isFormLoading"
      :form-error="dialogForm.formError"
      :rules="dialogForm.rules"
      :visible.sync="dialogForm.dialogFormVisible"
      :title="dialogForm.title"
      @request="handleSubmitForm"
    />
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      ...
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      :page-sizes="[10, 20, 50, 100]"
    />
  </div>
</template>

export default {
  components: { Pagination },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      listLoading: false,
      dialogStatus: '',
      textMap: {
        update: '编辑用户',
        create: '新建用户'
      },
      dialogForm: {
        formData: {},
        formDesc: {
          groupid: {
            options: this.groupOptions,
            label: '分组名称',
            type: 'select',
            required: true,
            isReloadOptions: true,
            disabled(data) {
              return data.dialogStatus === 'update'
            }
          },
          username: {
            label: '手机号',
            type: 'input',
            required: true,
            rules: [
              {
                len: 11,
                enum: [],
                type: 'string',
                trigger: 'blur',
                message: '手机号长度为11位'
              }
            ],
            disabled(data) {
              return data.dialogStatus === 'update'
            }
          },
          password: {
            label: '密码',
            type: 'input',
            required: true,
            rules: [
              {
                min: 6,
                max: 16,
                enum: [],
                type: 'string',
                trigger: 'blur',
                message: '密码长度在6-16位之间'
              }
            ]
          },
          firstName: {
            label: '中文名称',
            type: 'input',
            required: true
          },
          email: {
            label: '邮箱',
            type: 'input',
            required: true,
            rules: [
              {
                enum: [],
                type: 'email',
                trigger: 'blur',
                message: '邮箱格式不正确'
              }
            ]
          }
        },
        dialogFormVisible: false,
        isFormLoading: false,
        rules: {},
        formError: {},
        title: ''
      }
    }
  },
  computed: {
    ...mapGetters(['groups']),
    ...mapGetters(['users']),
    groupOptions: function() {
      var arr = []
      this.groups.forEach(g => {
        arr.push({
          text: g.name,
          value: g.id
        })
      })
      return arr
    }
  }
}

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version: 2.6.10
• ElementUI version: 2.7.2
• vue-ele-form version: 0.8.24

Question（提问）

您好，我用这个ele-form.希望是根据接口返回，然后动态生成formDesc,

Steps to reproduce（问题复现步骤）

当从接口获取字段，然后生成forDesc时回报错：
Error in getter for watcher "computedFormDesc": "TypeError: Cannot create property '_vifs' on number '200'"

created() {
    this.getFormDesc()
  },
  methods: {
    async getFormDesc() {
      const form = await getFormDesc()
      this.formDesc = JSON.parse(JSON.stringify(form))
    },
}

请问有实现异步创建的方法吗？

Other relevant information（格外信息）

• Vue version: 2.
• ElementUI version:2.13.0
• vue-ele-form version:0.8.24

Bug report（问题描述）

更新到最新后，联动属性失效
代码如下
formDesc: { status: { options: [ { text: "启用", value: 1 }, { text: "禁用", value: -1 } ], label: "状态", type: "radio", attrs: { size: "medium" }, default: 1 }, password: { label: "密码", type: "password", attrs: { size: "medium", clearable: true, }, required: true, vif (data) { return data.status !== 1; } } },
<ele-form v-model="formData" :form-desc="formDesc" :form-attrs="{ size: 'small' }" :request-fn="handleSubmit" @request-success="handleSuccess" ></ele-form>

Feature request（新功能建议）

group 分组 能否增加联动属性vif，可以动态隐藏某个tab?
你可以试试在 EleFormGroup.vue 第11行后(el-tab-pane)增加一句
v-if="item.vif == null || item.vif(item.form.formData, item.form.formData[field])"
这样就可以动态隐藏某个tab.
请看附件示例和修改后的EleFormGroup.vue, 当点击 修改密码 后，会动态显示新旧密码的选项卡。
谢谢了，前面的问题都解决了！ 十分给力！
ele-form-group-sample.vue.txt
EleFormGroup.vue.txt

自有组件中使 用用 ele-form-dialog 组件，加载数据为什么不显示，当更新一项时，其他数值就都显示了？？
下面是第一种赋值方法：
      const keyArr = Object.keys(this.newColumnValue)
      keyArr.map(item => {
        this.$set(this.formData, item, this.newColumnValue[item])
      })
第二种：Object.assign({},this.formData, this.newColumnValue)
第三种：this.formData = row

以上三种方法都不能更新视图。
当点击增加或修改时，是先显示出来ele-form-dialog 组件，后变化的ele-form-dialog 组件的formData性情？

Bug report（问题描述）

1、表单页载入完成后必填项错误直接显示
2、select组件完成选择后，必填错误提示并不消失，但表单可以正常提交

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version:
• ElementUI version: 最新版
• vue-ele-form version: 最新版

<el-input
:class="desc.class"
:placeholder="'请输入' + desc.label"
:show-password="true"
:style="desc.style"
v-bind="attrs"
v-model="newValue"
v-on="onEvents"

如果不删除
我在外面调用时，无法用 attrs 修改它
attrs : {
"placeholder":this.$t('message.inputpassword')
}

如果不删除， 请改为
:placeholder="desc.placeholder"
我也可以在外部控制它
formDesc: {"password":{"type":"password","label":this.$t('message.password'),"default":"","placeholder":this.$t('message.inputpassword')}

两种方法都可以

Bug report（问题描述）

最新版单一页面有多个options使用Promise 对象时，会触发多次请求

Steps to reproduce（问题复现步骤）

<ele-form-section v-model="formData" :sections="formDesc" :request-fn="handleRequest" submitBtnText="下一步" :labelPosition="labelPosition" :isLoading="isLoading" :options-fn="http.get" @request-success="handleRequestSuccess" >

formDesc: { headBankCode: { options: '/mpc/yeb/bank?is_main=1', label: "开户银行编码", type: "select", required: true, attrs:{ 'filterable': true, 'remote': true, } }, bankAddress: { default: [], options: '/mpc/yeb/region', label: "开户行地址", type: "cascader", required: true }, bankCode: { options: '/mpc/yeb/bank', label: "开户银行支行编码", type: "select", required: true } }

Other relevant information（格外信息）

• Vue version:
• ElementUI version: 2.13
• vue-ele-form version:0.8.22

Bug report（问题描述）

前两天在使用vue-ele-form-image-uploader的时候为图片设置了默认值和必填，但是对图片点击删除按钮后仍可以正常提交，我开始以为是这个组件的bug，便去提了一个issue。

之后空下来研究这个bug之后，发现并不是这么回事，于是就有了标题所说的bug

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

<template>
  <!-- 左右拖动, 可体验响应式表单 -->
  <ele-form
    v-model="formData"
    :formDesc="formDesc"
    :request-fn="handleSubmit"
    :rules="rules"
    @request-success="handleSuccess"
  ></ele-form>
</template>

<script>
  export default {
    data() {
      return {
        rules: {
          title: [
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        },
        formDesc: {
          author: {
            children: {
              first: {
                type: 'input',
                label: '姓',
                layout: 8,
                required: true
              },
              second: {
                type: 'input',
                label: '名',
                layout: 16,
                required: true,
                disabled: data => !data.author.first
              }
            }
          },
          title: {
            default: "我是默认值",
![Video_20200623093829](https://user-images.githubusercontent.com/66452398/85351136-91aab780-b535-11ea-8561-33f883ec60e4.gif)

            type: 'input',
            label: '标题',
            rules: [{ required: true, message: '请输入标题', trigger: 'blur' }]
          },
          content: {
            type: 'textarea',
            label: '内容',
            required: true,
            attrs: {
              autosize: { minRows: 4, maxRows: 10 }
            }
          },
          original: {
            type: 'radio',
            label: '是否为原创',
            options: [
              { text: '原创', value: 1 },
              { text: '转载', value: 0 }
            ]
          },
          reprinted: {
            type: 'switch',
            label: '是否可转载',
            vif(data) {
              return data.original === 1
            }
          },
          sourceUrl: {
            type: 'input',
            label: '来源地址',
            vif(data) {
              return data.original === 0
            },
            slots: {
              prepend(h) {
                return h('span', 'http://')
              },
              append(h) {
                return h('span', '.com')
              }
            }
          }
        },
        formData: {}
      }
    },
    methods: {
      handleSubmit(data) {
        return Promise.resolve()
      },
      handleSuccess() {
        this.$message.success('创建成功')
      }
    }
  }
</script>

Other relevant information（格外信息）

• Vue version:
• ElementUI version:
• vue-ele-form version: 0.8.25

请问，使用select的远程搜索如何改变option的值

Bug report（问题描述）

options 当联动函数返回Promise时 只要当Promise返回的是个空数组时，后续的接口请求值第一次均无法被设置到选项上，只有当options函数第二次调用并有返回值时才能设置上值

Steps to reproduce（问题复现步骤）

formDesc: { codeA: { label: "codeA", type: "select", options: [ { value: "1", text: "1" }, { value: "2", text: "2" } ] }, codeB: { label: "codeA", type: "select", isReloadOptions: true, options: data => { if (data.codeA === "2") { return Promise.resolve([]); } else { return Promise.resolve([{ value: "3", text: "3" }]); } } } }

Other relevant information（格外信息）

• Vue version:
• ElementUI version: 2.13
• vue-ele-form version: 0.8.24

复现代码

formDesc: {
        title: {
          type: 'select',
          label: '标题',
          options: ['ask', 'share']
        },
        select: {
          type: 'select',
          label: '地址',
          isReloadOptions: true,
          options: () => {
            return this.getOptions()
          }
        }
      }
    }

async getOptions () {
      const result = await fetch('https://cnodejs.org/api/v1/topics?tab=' + this.formData.title)
        .then(function (res) {
          return res.json()
        }).then((resOptions) => {
          let options = []
          resOptions.data.forEach(item => {
            options.push({ value: item.id, text: `${item.tab}--${item.title}` })
          })
          return options
        })
      return result
    }

需求：第一个选择框改变，触发第二个选择框的options，重新更新第二个选择框的选项
bug现象：1. 第一次改变选择框的时候第二个选择框没有显示数据。
2.第二及第二次以后改变第一个选择框，第二个选择框的选项延后显示。

我设置了表单的自定义按钮数组，但是无效。查看代码，是EleForm.vue 里的初始化错误，btns.concat(customBtns) 会连接两个数组，并返回新的数组，但是原数组btns数据是不会变得。请修正下！

以下是参考代码
// 自定义按钮
if (this.formBtns) {
const customBtns = this.formBtns.map((btn) => ({
attrs: {
type: btn.type,
size: formBtnSize
},
text: btn.text,
click: btn.click
}))
btns.concat(customBtns)
}

Feature request（新功能建议）

参考项目
https://github.com/GavinZhuLei/vue-form-making

如何不展示表单label，在动态做搜索框时，一般不需要label,通过提示即可告知作用

Steps to reproduce（问题复现步骤）

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

Other relevant information（格外信息）

• Vue version:
• ElementUI version:2.1.3
• vue-ele-form version:

Other relevant information（格外信息）

• Vue version:
• ElementUI version:2.11

请问 ele-form-group 新增加的按钮区class=“ele-form-btns” 怎么使用？
我在引用 ele-form-group的vue里定义了class, 没有效果