Fast-Crud-UI是Fast-Crud配套的前端组件库。可快速实现表格CRUD, 支持强大、灵活的筛选、排序、新增和数据编辑功能。 并且扩展性高、配置灵活。

fast-crud基于vue@2.7.16 + element-ui@2.5.14， fast-crud-ui打包不会包含这两个组件，你必须在项目里单独安装并正确注册。

针对兼容性, 理论上vue2.x和element-ui较高版本应该都支持。

如果针对element-ui你采用的是按需部分引入，请确保以下element-ui组件正确注册, 否则fast-crud-ui中部分内容将无法正常展示：Table, TableColumn, Input, InputNumber, Checkbox, CheckboxGroup, Select, Option, DatePicker, Switch, TimePicker, Radio,Upload, Row, Col, Button, Empty, Popover, Form, FormItem, Dropdown, DropdownMenu, DropdownItem, Pagination, Link

快速开始

安装

npm install fast-crud-ui

配置

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
import FastCrudUI from 'fast-crud-ui'
import 'fast-crud-ui/lib/style.css'
import http from "@/http" // 假设这里可导入你的axios实例

Vue.use(ElementUI)
Vue.use(FastCrudUI, {
    $http: http // axios实例, 必须提供!
})

new Vue({
    render: (h) => h(App)
}).$mount('#app')

使用

<template>
  <fast-table :option="tableOption">
    <fast-table-column prop="id" label="ID"></fast-table-column>
    <fast-table-column-img prop="avatarUrl" label="头像"/>
    <fast-table-column-input prop="name" label="姓名" first-filter/>
    <fast-table-column-number prop="age" label="年龄"/>
    <fast-table-column-select prop="sex" label="性别" :options="[{label: '男', value: '1'}, {label: '女', value: '0'}]"/>
    <fast-table-column-date-picker prop="createTime" label="创建时间" type="datetime" :editable="false"/>
  </fast-table>
</template>

<script>
  import {FastTableOption} from "fast-crud-ui";
  export default {
    name: "EasyDemo",
    data() {
      return {
        tableOption: new FastTableOption({
          module: 'student',
          // 更多配置参考后续文档:《Fast-Crud》前端——FastTableOption
        })
      }
    }
  }
</script>

出界面

此时已经具备完整且强大的CRUD功能了。

我表里已经mock了一些数据

接下来

阅览FastTableOption 配置项列表 和 FastTableColumn* 所有列组件使用和配置项列表