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

╰半夏微凉° 2024-03-24 13:21 59阅读 0赞

#### 初识Avue ####

*  什么是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/][https_v3.avuejs.com]

[https_v3.avuejs.com]: https://v3.avuejs.com/