Giter VIP home page Giter VIP logo

leezng / element-patch Goto Github PK

View Code? Open in Web Editor NEW
202.0 14.0 40.0 1.95 MB

An extension package based on vue and element-ui. 一个基于 vue 与 element-ui 的扩展包,提供数据驱动的表单渲染,菜单渲染,表格拖拽,权限控制等功能

Home Page: https://leezng.github.io/element-patch/

License: MIT License

Vue 17.55% JavaScript 77.70% HTML 2.00% SCSS 2.76%
element vue component element-ui renderer

element-patch's Introduction

element-patch

An element-ui based extension package. We extend some components, such as Table, Menu, Form, etc., to enrich their features and functions, such as dynamically rendered forms and menus, draggable tables, and more. At the same time, we have added some common components and scenarios, such as tree selectors, to provide a fast solution.

From el-form-renderer to element-patch, el-form-renderer has become a historically independent branch that will no longer be maintained separately. You can click here to see how to migration from el-form-renderer.

Links

Quick start

// Step1: Install
// Make sure you have properly installed element-ui and used it correctly.
yarn add element-patch

// Step2
import ElementPatch from 'element-patch'
import 'element-patch/index.css'

Vue.use(ElementPatch)

Features

  • Dynamically rendered Form
  • Dynamically rendered Menus
  • Draggable Table
  • Table supporting pagination
  • Menu that supports permission control
  • Tree selector
  • Tag selector ...

element-patch's People

Contributors

dependabot[bot] avatar jbguy avatar leezng avatar levy9527 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

element-patch's Issues

Avoid mutating a prop directly...

found in
---> <RenderFormItem>
       <ElForm>
         <ElFormRenderer>
           <MyComponent> at src/path/to/my/Component.vue
             <Root>
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Upon inspection, it seems like this is the line affecting this because the error went away when i did this but of course the form stopped working afterwards

#Sample
https://github.com/adin234/el-form-renderer-warning

大佬你好,有几个问题咨询下

1.现在往select中动态加载下拉数据貌似不能用setOptions方法了,应该如何处理?现在这个patch有没有实现?
2.现在全是单列渲染,是否能支持多列渲染?
3.content里能否也直接渲染button组件并添加事件(比如确认提交,取消之类的)?
万分感谢!

slot怎么结合使用

请问怎么结合slot一起使用,我要在里面还要动态添加特定表单,非常感谢

表单默认值问题

某个缓存策略导致设置默认值有问题。
具体表现为:

        // 设置默认值
        let defaultValue
        if (this.isEdit) {
          defaultValue = node[item.mapperName] ? node[item.mapperName] : ''
        } else {
          defaultValue = ''
        }
        // 设着通用属性
        const formItem = {
          $id: item.mapperName,
          $type: 'input',
          $default: defaultValue,
          label: item.descName,
          $el: {
            disabled: !this.setAttr(item, 1)
          },
          rules: [{
            required: item.isRequired === '01', message: '请填写该字段', trigger: 'blur'
          }]
        }

打开一个包含动态表单的对话框,第一次设置一个默认值以后,修改默认值属性,第二次打开仍然为第一次的值。此时defaultValue已经改变,页面并没有发生明显变化

目前采用的解决办法:

<el-form-renderer v-if="orgDialog" :content="formContent" inline label-width="120px" ref="orgForm"></el-form-renderer>
this.$refs.orgForm.resetFields()

为组件添加vif指令,每次生成formContent的时候调用resetFields方法

rules有问题

假设有一个文本框,启用required验证,数据初始为空,输入数据,会提示数据为空,再输入才正常。
貌似验证时取到的是前一次的值,或者是验证的dom更新有延迟,使用的是前一次验证完的值。
官方示例里也有这个问题。

表单form没有clearValidate方法

问题描述:我的表单校验绑定在form-item上。form对象没有移除表单校验clearValidate的方法。可以使用resetFields重置值以及移除表单校验,这个问题会导致表单中的value遗留。

预期结果:希望能在form上添加移除表单校验的方法

目前通过 this.$refs.orgForm.$children[0].clearValidate() 解决

TreeSelect bug

<elx-tree-select
    :data="data"
    :default-expand-all="true"
    v-model="value1">
  </elx-tree-select>

当 value1 为空时 整个组件都没有了

use babel-plugin-component to reduce import bundle size ?

虽然index中引入方式为:import { Form } from 'element-ui'
但是build后实际引入element-ui的方式如下:

require("element-ui")

导致全量引入,无法进行bundle size的优化。
建议单独引入需要的表单部分组件,或者使用插件 babel-plugin-component 来修改引入方式,build后将会变成如下形式:

require("element-ui/lib/form")

不能绑定原生属性

version: "1.0.2"

举个例子

content如下:

content: [
  {
    $type: 'input',
    $id: 'name',
    label: '活动名称',
    $el: {
      placeholder: '请选择',
      size: 'mini'
    }
  }
]

el-input可以正常渲染,size生效,placeholder没有生效

原因

placeholder不是el-inputprops属性,size是,在render-from-item.jsrenderFormItemContent中:

return h('el-' + elType, {
  props: props,
  on: {
    // 手动更新表单数据
    input: (value) => {
      this.$emit('updateValue', { id: data.$id, value })
    }
  }
},...

只处理了props,没有处理attrsplaceholder属于el-inputattrs,其他属性同

其他

一个很尴尬的问题是,属于props还是attrs直接看element-UI文档有些是很难区分的,期待解决一下

function to update multiple fileds?

现在只有updateValue方法,如果回填多项表单字段数据就需要手动多次调用updateValue,这种用法不够合理吧?还是说回填数据时,要通过修改content里的$default字段来实现?

拖拽失效

数据源使用axios获取之后,拖拽会失效,进行拖拽的时候会选中单元格里字,而不是进行拖拽

el-form-renderer.js丢失

npm上[email protected]这个包,下载后发现,丢失el-form-renderer.js,因为package.json里main定义的是这个文件,结果导致

import ElFormRenderer from 'el-form-renderer'

报错
Cannot find module 'el-form-renderer’

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.