femessage / el-form-renderer Goto Github PK

如果我想做一个联动的select组件 A、B。B请求函数依赖A的value，如何去做？

目前我是通过props传入一个map参数合集，对应id字段，如果参数合集更新则重新调用接口，根据change事件手动更新参数，如果在复杂一点则用了slot代替了content里的组件，如何有更好的做法？

Describe the bug

尝试了一下group，但是报错

Screenshots

content: [
                {
                    id: "person",
                    type: "group",
                    items: [
                        {
                            id: "name1",
                            label: "name1",
                            type: "input",
                        },
                        {
                            id: "name2",
                            label: "name2",
                            type: "input",
                        }
                    ]
                }
            ]

To Reproduce

Steps to reproduce the behavior:
返回报错“Cannot read property 'name1' of undefined"”

Expected behavior

能不能给个group的相关示例，谢谢

environment information

• Version [e.g. 22]
• OS: MAC
• Browser chrome

使用enableWhen来进行表单表单联动 发现在更新了1.2版本后 enableWhen不生效了
具体表现为 两个form-item都有 enableWhen 只显示了最后的form-item

代码如下

<template>
  <el-form-renderer :content="form" ref="detailForm"></el-form-renderer>
</template>
<script>
export default {
  data() {
  return {
    form: [ 
       {
      $type: 'select',
      $id: 'dialect',
      label: '数据源类型',
      $options: [
        {
          label: 'mysql',
          value: 'mysql'
        },
        {
          label: 'oracle',
          value: 'oracle'
        }
      ],
    },
   {
      $type: 'select',
      $id: 'className',
      label: '数据库驱动',
      $options: [
        {
          label: 'com.mysql.jdbc.Driver',
          value: 'com.mysql.jdbc.Driver'
        },
        {
          label: 'com.mysql.cj.jdbc.Driver',
          value: 'com.mysql.cj.jdbc.Driver'
        }
      ],
      $enableWhen: {
        dialect: 'mysql'
      }
    },
    {
      $type:  'select' 
      $id: 'className',
      label: '数据库驱动',
      $el: {
        disabled: visible
      },
      $default: '',
      $options: [
        {
          label: 'oracle.jdbc.driver.OracleDriver',
          value: 'oracle.jdbc.driver.OracleDriver'
        }
      ],
      $enableWhen: {
        dialect: 'oracle'
      }
    },
     ]
    }
  }
}
</script>

有个自定义组件，其没有 v-model 而是使用了两个 sync 属性与外界同步信息。

引入DatePick设置type: 'daterange'的话返回的是一个字符串以逗号分隔，能否返回两个字符串

Describe the bug

TODO

Screenshots

To Reproduce

1.复制下面代码, 覆盖这个demo的代码(https://femessage.github.io/el-form-renderer/#/Demo/value-format)
2. 点击 set value, 再点击 log value, 表单值会正常被打印
3. 点击 updater 会出现错误, 再点击 log value 会打印 { startDate: undefined, endDate: undefined }

<template>
  <div class="format">
    <el-form-renderer :content="content" inline ref="formRender">
      <el-form-item>
        <el-button @click="setValue">set value</el-button>
        <el-button type="primary" @click="getValue">log value</el-button>
        <el-button type="warning" @click="updater">updater</el-button>
      </el-form-item>
    </el-form-renderer>
  </div>
</template>

<script>
  export default {
    name: 'format',
    data() {
      return {
        content: [
          {
          	id: 'name',
            label: 'name',
            type: 'input',
          },
          {
            el: {
              type: 'daterange',
              valueFormat: 'yyyy-MM-dd'
            },
            type: 'date-picker',
            id: 'date',
            label: 'date',
            inputFormat: (row) => {
              return [row.startDate, row.endDate]
            },
            outputFormat: (val) => {
              if (!val) {
                return {startDate: '', endDate: ''}
              }
              return {
                startDate: val[0],
                endDate: val[1]
              }
            }
          }
        ]
      }
    },
    methods: {
      getValue () {
        const value = this.$refs.formRender.getFormValue()
        console.log(value)  // 输出为对应id 和值组成的对象
      },
      setValue () {
        this.$refs.formRender.updateForm({
          startDate: '2019-01-01',
          endDate: '2019-01-02'
        })
      },
      
      updater() {
      	this.$refs.formRender.updateForm({
          name: 'I\'m a KING!'
        })
      }
    }
  }
</script>

Expected behavior

保持已被format的值, TODO

environment information

• 1.12.1
• Windows
• Chrome

使用场景如下：
disabled的时候 点击可以跳转 edit的时候可以编辑

当使用 slot 的时候，我们希望 slot 中的值也出现在 v-model 中，这样提交表单时直接提交整个 model 即可

Is your feature request related to a problem? Please describe.
且不说 updateForm & getFormValue 的繁琐；
常见的场景是 el-dialog 里套一个 el-form-renderer。如果希望 form 有默认值，那当前的做法是：

1. elDialog.visible = true，然后两层 nextTick 后调用 updateForm（一层不保险，有反馈过
2. 监听 el-dialog 的 opened 事件，然后 updateForm

两种都很丑。且易触发 rule 校验等各种奇怪问题

Describe the solution you'd like
v-model，别让用户关心 updateForm 和 getFormValue 的时机

Describe the bug

如题

Screenshots

1

2

Expected behavior

• 期待回复生效
• 影响到项目, 但曲线办法是部门开始使用 readonly;

environment information

• Version 1.13.1
• OS: macOS
• Browser: ever-green

Is your feature request related to a problem? Please describe.
Hello, is it possible to do inline forms using this library? Or inline specific form items?

Describe the solution you'd like
Add support for inline form items.

Describe the bug
当新建用户的时候期望的是能够使用空的表单，但是谷歌浏览器自动填充了

Screenshots

To Reproduce
谷歌浏览器，点击http://xpaas-test.deepexi.io/xpaas-staff-console/index.html#/user-management 选择其他应用，添加用户，这时候用户名和密码都自动填充了

Expected behavior
期望能够给与用户是否让表单的值自动填充

**environment information: **
win10 chrome 70+

Is your feature request related to a problem? Please describe.
增加自定义label内容
Describe the solution you'd like
A clear and concise description of what you want to happen.
表单label中可能会有一些自定义内容，如帮助信息等

Describe alternatives you've considered
对表单内的lable都可以添加自定义内容slot

Additional context

Describe the solution you'd like
数据回填时，model经transformOutputValue处理之后，只保留content内的id作为form的属性

期望

其他字段也保留

场景：

form表单的其他字段，可能会在其他的地方使用，如下代码。
实际上model经transformOutputValue处理之后已丢失了。

在线demo

this.form = {
    name: 'tom',
    age: 8
}
<el-form-renderer v-model="form" :content="[{id: 'name', label:'姓名'}]" > 
<template>
{{form.age}}  改变form.name,会导致form.age变成undefined
</template>
</el-form-renderer>

Describe the bug

content 表单下数组里面传入的 disabled 失效
传入的 disabled 为 true

Screenshots

Expected behavior

environment information

Describe the bug

使用自定义组件时，若model 值包含 File 对象，会丢失

我的用例，封装了 el-upload 组件，需要拿到 file 对象，
结果经过 getFormValue 的 clone 值后， file 对象丢失了

Screenshots

这个是 `getFormValue` 得到的值
{
  "status": "ready",
  "name": "idea-settings-190507 - 副本.bin",
  "size": 12047,
  "percentage": 0,
  "uid": 1569289372447,
  "raw": {
    "uid": 1569289372447
  }
}

raw 是 File 的原始对象，结果只剩 element-ui 赋的 uid 字段了。。

Expected behavior

正常返回 file 对象

environment information

• v1.11.2

el-tree的数据用的key是data，与el-form-renderer中冲突

To Reproduce

在使用了 remote 的 content 中插入一项，remote 重新发出请求

Expected behavior

可以在 watch 里比对一下：如果前后的 url 或 request 函数的引用相同，则不发出请求

• NoForm and their Article
• 再也不想写表单了
• Form 表单组件设计之路
• ncform

我注意到最近的更新，radio-group的options已经支持{ label, value }选项，现在希望checkbox-group的选项也支持{label, value}选项，将label和value分开。

感谢。

I am currently playing with demo page of url

i entered firstname in textbox then right after that trying to write space and then lastname.

but it won't allow me to add space and lastname at the end. it will trim the space and reset the cursor.

here is the event called while writing the text

updateValue $emit by

please can anyone help to solve this issue.

since update el-form-renderer value using api updateForm,
then get value from el-form-renderer named getForm may be more consistently.

suggestion: add api getForm, getting same result with getFormValue, add deprecated api getFormValue

Describe the bug
有两个英文README

Screenshots

Expected behavior
删掉旧的？

现有问题:在table 中如果除了 新增 修改 查看的dialog之外,还有其他的dialog,要怎么配置呢,或者说能否在demo里面增加一个说明

**Problems
现在有动态设值穿梭框的data需求

**Scene

** Describe
框一中的数据是通过接口请求回来的，期望的是接口请求之前可以动态设值穿梭框

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.

场景: 一个表单新增页面、一个save按钮(save第一步是执行表单的validate方法)

步骤:
1.在el-from-renderer中使用 el-cascader[官方]级联选择组件、upload-to-ali组件。
2.页面初次渲染后，直接点击save按钮，此时表单的validate方法执行，各个组件的校验error提示出现。
3.在el-cascader中选中到数据，el-cascader的校验提示不消失；在upload-to-ali选择中图片，其校验提示也不消失。
4.使用trigger: change/blur ，都不理想/无效。
5.el-input、el-select好像无此问题。目前不知道还有没有其他element官方组件校验不能即时触发。

Describe the solution you'd like
期望:
在表单中组件(upload-to-ali、el-cascader...)的值变动时，能够使校验提示正常的显隐藏(或者触发校验方法8 ^_^).

Describe alternatives you've considered
使用者的不成熟想法:
1.针对el-cascader[官方]级联选择组件，这种校验可能需要在el-form-renderer中进行改进；
2.针对upload-to-ali这种企业/个人封装的组件，建议在v-model的值变动时手动触发el-form-item的校验方法，如下图。这种触发方式有实践过

input & textarea 的 readonly 模式只考虑了 label 在 左侧的定位；当 label 在其他位置时就会很丑陋了。

建议用回 input & textarea，使用原生 readonly 属性。然后用如下 css 固定样式

textarea[readonly] {
  border: 1px solid #dcdee6; // 只读状态不要有 focus 状态
}

Describe the bug

options里的value如果是number的0，在form-renderer会被转成undefined

Expected behavior

允许 value: 0 .

**environment information: **

• Version 1.4.1
• OS: macOS
• Browser Chrome

use class and css:

or like this:

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
期望能对渲染的表单项目进行排序

Describe alternatives you've considered
例如以下的表单，现在是分成了左右两行；我需要按照这个顺序来显示，但是我现在必须使用2个form-renderer来显示；期望只使用一个来配置；

Additional context
如题
现在的代码结构如下

Version

1.3.0

OS/Browsers version

Windows 10 - Chrome 73

Framework

nuxt

Questions

my formContent item has set inputFormat, there is nothing wrong when call updateForm. But when i call updateVaule which setted inputFormat, error occurred.

Here will call the inpueFormat inside!

But updateVaule didn't.

What is Expected?

Maybe write the default inputFormat code in the function updateValue, because updateForm just calls updateValue Iteratively

Describe the bug

field 类型为 Boolean , 值为 false 时, inputFormat 不生效

比如, el-switch
使用 inputFormat

var value = item.type === GROUP ? updateValue(item.items) : item.inputFormat && item.inputFormat(values) || values[item.id];

inputFormat 返回 false 时，还是使用原来的值

Expected behavior

绑定 inputFormat 返回的值，包括 false, "" 这些

environment information

• 1.11.0

Is your feature request related to a problem? Please describe.
很多场景希望使用 el-form-item 原生的 label slot 功能。但目前不支持

Describe the solution you'd like
当识别 label 为 vnode 时，将其当做 slot 传入 el-form-item

场景如下
package需要以groupId为前缀
希望可以自动补充前缀

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
见图

Screenshots

To Reproduce

Expected behavior
参看element的select相同功能实现
https://codepen.io/anon/pen/gJaGdx?&editable=true

期望支持自定义布局

Version

1.3.0

OS/Browsers version

Windows 10 - Chrome 73

Framework

nuxt

Questions

I want to use the el-cascader in my project, but my props options is asynchronous, now i not found the api in the document

What is Expected?

Get asynchronous support of props data

{
$id: '',
component: 自定义组件,
label: ''
},
希望也可以把方法也传给 自定义组件 ，自定义组件内部就可以通过emit触发传过来的方法了

用组合 api 似乎失去了响应式。

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

{
  type: "checkbox",
  id: "id",
  label: 'checkbox'
}

1. label 和 checkbox 的顺序是反的。正确的应该是 checkbox label。使用组件渲染出来的是 label checkbox
2. 最终渲染出来的 checkbox，点击 label 后，不会触发 change 事件修改 checkbox 的值

Is your feature request related to a problem? Please describe.

无

Describe the solution you'd like

如标题