初识Avue-一键生成表格表单

什么是Avue

Avue.js是基于element-ui库进行的二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图，主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易

亮点:

1. 只需要配置简单的json属性，即可实现复杂的页面
2. 配置不同的属性,实现不同的控件效果和业务逻辑(需要一个上传图片的功能,配置属性为upload,和图片上传后台接口即可)
3. 配置字典接口,全局字典自动加载无需操心label和value值的对应
4. 简单配置即可实现分步骤表单提交,多选项卡表单提交,等其他复杂的表单
5. 不需要写大量html和css ,只需要一个json即可完成你的页面
6. 解放手写大量重复crud和form表单功能,只要维护一个json就好

适合人群:

1. 常年撸后端,对前端页面有恐惧心里
2. 刚入门vue ,需要写- -些复杂的业务场景
3. 干着大量重复的crud ,机械式劳动,浪费时间
4. 前端小白,没用过很多框架,没有很多经验

安装配置

1. 新建一个vue项目
2. 安装element-plus、@smallwei/avue、axios
3. 在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import axios from 'axios'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(elementPlus)
app.use(Avue, { axios }).mount('#app')

使用

就像使用echarts一样，通过json数据来进行显示内容的配置
示例：

<template >
  <avue-crud v-model="form" :option="option" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel">avue-crud>
template>
<script setup>
import { ref, watch } from 'vue'
const option = ref(null)
const data = ref(null)
const form = ref({})
option.value = {
  stripe: true,
  selection: true,
  showSummary: true,
  column: [{
    search: true,
    label: '姓名',
    prop: 'name',
  }, {
    label: '入职时间',
    prop: 'time',
    type: 'date'
  }, {
    label: '年龄',
    prop: 'age',
    type: 'number'
  }, {
    label: '性别',
    prop: 'sex',
    type: 'radio',
    dicData: [{
      label: '男',
      value: 0
    }, {
      label: '女',
      value: 1
    }, {
      label: '未知',
      value: '未知'
    }]
  }, {
    label: '离职状态',
    prop: 'switch',
    type: 'switch',
    value: 1,
    dicData: [{
      label: '离职',
      value: 0
    }, {
      label: '在职',
      value: 1
    }]
  }]
}
watch(form, () => {
  console.log(form, data);
})
data.value = [{
  name: '张三',
  age: 12,
  sex: '未知',
  switch: 1,
  time: '2023-01-01'
}, {
  name: '李四',
  age: 13,
  sex: 1,
  switch: 1,
  time: '2023-01-01'
}]
function rowSave(row, done, loading) {
  done(row)
}
function rowDel(row, index, done) {
  done(row)
}
function rowUpdate(row, index, done, loading) {
  console.log(row);
  done(row)
}
script>

可以通过type来设置每一项的内容，具体参考：https://v3.avuejs.com/