vue-form-table（vuejs+element-ui的表格表单控件的二次封装插件）

最新推荐文章于 2025-03-22 12:27:17 发布

涳涳嘚慌

最新推荐文章于 2025-03-22 12:27:17 发布

阅读量2.4k

点赞数

分类专栏：框架/工具文章标签： vue vue.js 前端

本文链接：https://blog.youkuaiyun.com/oschina_41767564/article/details/104600144

版权

框架/工具专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于Element UI的二次封装组件库——vue-form-table，它包括了myForm和TreeGrid两个核心组件，用于简化表单和表格的开发过程。myForm组件支持多种输入类型和验证规则，而TreeGrid组件则提供了树形表格的展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-form-table

介绍

基于element-ui的el-form和el-table做的二次封装
仓库地址：https://gitee.com/ziyuan_xcc/vue-form-table
组件说明文档：https://shimo.im/docs/Pg3WWJpYr6PJHjqh

示例

在这里插入图片描述

<template>
  <div class="demo">
    <div>
      <h1>myForm</h1>
      <my-form :data="data" :form="form" :rules="rules"></my-form>
    </div>
    <div>
      <h1>TreeGrid</h1>
      <tree-grid :columns="tableHeader" :dataSource="tableData" :info="tableInfo" :loading="loading"></tree-grid>
    </div>
  </div>
</template>

<script>

  import myForm from '@/components/form/myForm'
  import TreeGrid from '@/components/TreeGrid'

  export default {
    name: 'demo',
    components: {myForm, TreeGrid},
    data () {
      return {
        data: [
          {model: 'name', label: '姓名', type: 'input'},
          {model: 'height', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
          {model: 'sex', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]}
        ],
        form: {name: '', sex: 0, height: ''},
        rules: {},
        loading: false,
        tableHeader: [
          {titleName: '111', fieldName: 'a'},
          {titleName: '222', fieldName: 'b'},
          {titleName: '333', fieldName: 'c'}
        ],
        tableData: [
          {a: 1, b: 31, c: 4},
          {a: 53, b: 31, c: 4},
          {a: 23, b: 32, c: 4}
        ],
        tableInfo: {pageNum: 1, pageSize: 10, total: 3}
      }
    }
  }
</script>