An element-ui based extension package. We extend some components, such as Table, Menu, Form

Last update: Jun 10, 2022

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 ...

GitHub

https://github.com/leezng/el-form-renderer
Comments
  • 1. keep getFormValue() always returning the same value

    test case see below

        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (!valid) return
    
            let change = this.$refs[formName].getFormValue()
            // this will not change getFormValue()'s return value
            change.levy = 'levy'
            
            let unchange = this.$refs[formName].getFormValue()
            console.log(change, unchange)
    
         });
        }
    
    Reviewed by levy9527 at 2018-11-14 09:27
  • 2. 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

    Reviewed by adin234 at 2018-07-12 11:33
  • 3. 表单form没有clearValidate方法

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

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

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

    Reviewed by MrTreasure at 2018-05-08 10:07
  • 4. 表单默认值问题

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

            // 设置默认值
            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方法

    Reviewed by MrTreasure at 2018-05-08 10:53
  • 5. Added simple append and prepend slot

    We needed to put some append and prepend to our inputs but i cannot find a way to do it so we updated the code to accommodate it image

    How to Use

    • Just add append: 'something' and/or prepend: 'something' to the $el property of your form

    From:

    {
        $type: 'input',
        $id: 'height',
        label: 'Height',
        rules: [{
            required: true,
            message: 'Please input height (e.g. 160)',
            trigger: 'blur',
        }],
    }
    

    To:

    {
        $type: 'input',
        $id: 'height',
        $el: {
            prepend: 'Some Prepend',
            append: 'ft.',
        },
        label: 'Height',
        rules: [{
            required: true,
            message: 'Please input height (e.g. 160)',
            trigger: 'blur',
        }],
    }
    

    If this is already supported, please close the PR and point me to the right direction.

    Reviewed by adin234 at 2018-05-07 16:43
  • 6. 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’

    Reviewed by levy9527 at 2018-06-03 15:32
  • 7. TreeSelect bug

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

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

    Reviewed by z417915015 at 2019-04-18 07:03
  • 8. 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")
    
    Reviewed by daskyrk at 2018-06-27 02:34
  • 9. 不能绑定原生属性

    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文档有些是很难区分的,期待解决一下

    Reviewed by Alvin-Liu at 2018-05-17 08:12
  • 10. show the usage of updateValue

    before I jump into the source code, and found this method, I spend time fixing bug that my form-item value cannot update after my model's$default update😰

    Reviewed by levy9527 at 2018-05-15 03:47
  • 11. Bump async from 2.6.1 to 2.6.4

    Bumps async from 2.6.1 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 20:31
  • 12. Bump follow-redirects from 1.14.7 to 1.14.8

    Bumps follow-redirects from 1.14.7 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-12 11:19
  • 13. Bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-11 05:17
  • 14. Bump node-sass from 4.13.1 to 7.0.0

    Bumps node-sass from 4.13.1 to 7.0.0.

    Release notes

    Sourced from node-sass's releases.

    v7.0.0

    Breaking changes

    Features

    Dependencies

    Community

    • Remove double word "support" from documentation (@​pzrq, #3159)

    Misc

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 12, 14, 16, 17
    OSX x64 12, 14, 16, 17
    Linux* x64 12, 14, 16, 17
    Alpine Linux x64 12, 14, 16, 17
    FreeBSD i386 amd64 12, 14

    *Linux support refers to major distributions like Ubuntu, and Debian

    v6.0.1

    Dependencies

    Misc

    Supported Environments

    ... (truncated)

    Changelog

    Sourced from node-sass's changelog.

    v4.14.0

    https://github.com/sass/node-sass/releases/tag/v4.14.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-10 17:57
  • 15. Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 02:01
  • 16. Bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-04 00:49
A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

Jun 29, 2022
Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.

vue-hammer Hammer.js wrapper for Vue to support some operation in the mobile This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration

May 10, 2022
Custom your personal dashboard from some component

Dashboard Custom your personal dashboard from some components. Writed by Vue3, Vite, Typescript. Simple Demo from Github pages Simple Demo from author

Jun 16, 2022
A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.
A starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some of my own practical experience on the basis of official documents.

learning-vue3 This is a starting learning tutorial on Vue 3.0 + TypeScript, suitable for complete Vue novices and Vue 2.0 veterans, incorporating some

Jun 27, 2022
Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)

vue-cron-generator a project using vue,element-ui to generate cron expression 中文 Online demo Used by ?? Attemper: A distributed,multi-tenancy,job-flow

Jun 10, 2022
⚡ Fast Vue Language Support Extension

Volar is a Language Support plugin built specifically for Vue 3. It's based on @vue/reactivity to calculate TypeScript on-demand to optimize performance similar to the native TypeScript language service.

Jun 27, 2022
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Jun 24, 2022
A chrome extension for automating your browser by connecting blocks
A chrome extension for automating your browser by connecting blocks

Automa An extension for automating your browser by connecting blocks. From auto-fill forms, doing a repetitive task, taking a screenshot, to scraping

Jul 1, 2022
This project aims to rewrite all Garry's Mod Menu to modern framework (Vue.js v2).

Garry's Menu Remake This project aims to rewrite all Garry's Mod Menu to modern framework (Vue.js v2). This mod is an early stage of developement, not

May 6, 2022
:star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).
:star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).

V-Emoji-Picker This simple package using Emojis Natives Contents V-Emoji-Picker Contents Installation Usage Props Events Using custom Emojis Using cus

Jun 22, 2022
The objective of this Package is the use gamepad in the project easily and get all functionality of treatment of the buttons
The objective of this Package is the use gamepad in the project easily and get all functionality of treatment of the buttons

Package-GamePad-Controller The objective of this Package is the use gamepad in the project easily and get all functionality of treatment of the button

Nov 8, 2021
Fully automated version management and package publishing
Fully automated version management and package publishing

?? ?? semantic-release Fully automated version management and package publishing semantic-release automates the whole package release workflow includi

Jun 29, 2022
Simple vue-virtualized package for Vue.js

vue-virtual-stream - Demo A virtualized list component for chats, comment lists and streams in general. This Vue component can be used to build large

Feb 19, 2021
NPM package: a 3D rolling sphere of words following your mouse movements
NPM package: a 3D rolling sphere of words following your mouse movements

wordsphere NPM package: a 3D rolling sphere of words following your mouse moveme

Jun 28, 2022
A playground for wI2L/jsondiff. Supports all the options of the package.
A playground for wI2L/jsondiff. Supports all the options of the package.

jsondiff Playground A playground for wI2L/jsondiff. Supports all the options of the package. Getting started To run the application locally, first ins

Apr 4, 2022
Periodicity is a dynamic, data-driven Periodic Table built with Vue.js that uses D3 animations and graphs to demonstrate the beauty of periodic trends.
Periodicity is a dynamic, data-driven Periodic Table built with Vue.js that uses D3 animations and graphs to demonstrate the beauty of periodic trends.

Periodicity is a dynamic, data-driven Periodic Table built with Vue.js that uses D3 animations and graphs to demonstrate the beauty of periodic trends.

Jun 24, 2022
A naïve online table web application.

Lab 2 - Naive gDocs Enter your team members here: [Leader] ID - Name: {X}% [Member 1] ID - Name: {Y}% [Member 2] ID - Name: {Z}% where X, Y, Z repr

Dec 4, 2021
VueJS mixin plugin for creating element size queries in components

VueJS mixin plugin for creating element size queries in components.

Jan 17, 2022
A vue directive which automatically resize font size based on element width.
A vue directive which automatically resize font size based on element width.

Vue Resize Text A vue directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive la

Jan 10, 2022