vue2-expand-component

Vue2 + Element UI 扩展组件库，包含动态表单和动态表格组件。

安装

npm install vue2-expand-component

依赖

• Vue 2.7+
• Element UI 2.15+

使用

全局注册

import Vue from 'vue'
import Vue2ExpandComponent from 'vue2-expand-component'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Vue2ExpandComponent)

按需引入

import Vue from 'vue'
import { DynamicForm, DynamicTable } from 'vue2-expand-component'
import 'element-ui/lib/theme-chalk/index.css'

Vue.component('DynamicForm', DynamicForm)
Vue.component('DynamicTable', DynamicTable)

组件文档

DynamicForm 动态表单

基本用法

<template>
  <DynamicForm
    :schema="formSchema"
    :model="formModel"
    :rules="formRules"
    @submit="handleSubmit"
    @reset="handleReset"
  />
</template>

<script>
export default {
  data() {
    return {
      formSchema: [
        {
          prop: 'name',
          label: '姓名',
          type: 'input',
          placeholder: '请输入姓名'
        },
        {
          prop: 'gender',
          label: '性别',
          type: 'radio',
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ]
        }
      ],
      formModel: {
        name: '',
        gender: 'male'
      },
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单提交', data)
    },
    handleReset() {
      console.log('表单重置')
    }
  }
}
</script>

Schema 配置选项

| 配置项 | 类型 | 说明 | 适用类型 | |--------|------|------|----------| | prop | String | 表单项的属性名 | 所有类型 | | label | String | 表单项的标签文本 | 所有类型 | | type | String | 表单项类型，支持：input、select、checkbox、radio、date、switch | 所有类型 | | placeholder | String | 表单项的占位文本 | input、select、date | | disabled | Boolean | 是否禁用表单项 | 所有类型 | | maxlength | Number | 输入框最大长度 | input | | showWordLimit | Boolean | 是否显示字数限制 | input | | options | Array | 选项列表，格式：[{ label: '标签', value: '值' }] | select、checkbox、radio | | multiple | Boolean | 是否支持多选 | select | | dateType | String | 日期选择器类型：date、datetime、daterange 等 | date | | format | String | 日期格式 | date | | span | Number | 表单项的栅格跨度 | 所有类型 | | offset | Number | 表单项的栅格偏移 | 所有类型 |

DynamicTable 动态表格

基本用法

<template>
  <DynamicTable
    :columns="tableColumns"
    :data="tableData"
    :loading="loading"
    :show-action="true"
    :actions="tableActions"
    :pagination="pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'id',
          label: 'ID',
          width: '80px'
        },
        {
          prop: 'name',
          label: '姓名'
        }
      ],
      tableData: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ],
      loading: false,
      tableActions: [
        {
          text: '编辑',
          type: 'primary',
          handler: (row) => console.log('编辑', row)
        },
        {
          text: '删除',
          type: 'danger',
          handler: (row) => console.log('删除', row)
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 2
      }
    }
  },
  methods: {
    handleSizeChange(size) {
      console.log('页码大小改变', size)
    },
    handleCurrentChange(current) {
      console.log('当前页码改变', current)
    }
  }
}
</script>

配置选项

| 配置项 | 类型 | 说明 | |--------|------|------| | columns | Array | 列配置信息 | | data | Array | 表格数据 | | loading | Boolean | 是否显示加载状态 | | height | String | 表格高度 | | stripe | Boolean | 是否显示斑马纹 | | border | Boolean | 是否显示边框 | | size | String | 表格尺寸 | | showAction | Boolean | 是否显示操作列 | | actions | Array | 操作按钮配置 | | actionWidth | String | 操作列宽度 | | showPagination | Boolean | 是否显示分页 | | pagination | Object | 分页配置 |

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

许可证

ISC