六分钟实现完整CRUD的单表数据维护功能

源码地址: github.com/pengxianggu…, DEMO: fastcrud.pengxg.cc/

看如下代码：

<template>
  <fast-table :option="tableOption">
    <fast-table-column-input prop="name" label="姓名"/>
    <fast-table-column-img prop="avatarUrl" label="头像"/>
    <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"/>
    <template #button="scope">
      <el-button :size="scope.size" icon="el-icon-link" @click="expandButton(scope, 'code')">查看源码</el-button>
      <el-button :size="scope.size" icon="el-icon-link" @click="expandButton(scope, 'doc')">查看文档</el-button>
    </template>
  </fast-table>
</template>

<script>
import {FastTableOption} from "../../../packages";

export default {
  name: "EasyDemo",
  data() {
    return {
      tableOption: new FastTableOption({
        module: 'student',
      })
    }
  },
  methods: {
    expandButton({choseRow, checkedRows, editRows}, type) {
      if (type === 'code') {
        window.open('https://github.com/pengxianggui/fast-crud/blob/main/fast-crud-ui/src/example/easy/EasyDemo.vue', '_blank')
      } else if (type === 'doc') {
        window.open('http://pengxg.cc/tags/fast-crud', '_blank')
      }
    }
  }
}
</script>

就能实现一个简单而又强大的CRUD表格，具备如下功能：

• 行内新增和批量新增
• 行内编辑和批量编辑
• 强大的复合型数据过滤功能
• 批量删除功能
• 同样也支持表单新增和表单编辑
• 编辑同样支持参数校验

批量新增：

批量编辑

强大的复合型筛选

支持的筛选形式有：

• 快筛
• 简筛
• 动筛
• 存筛(未来计划)

更多介绍见github: github.com/pengxianggu…, 或者文档：pengxg.cc/tags/fast-c…