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

Posted 2023-04-10 苦夏木禾

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识Avue-一键生成表格表单相关的知识，希望对你有一定的参考价值。

初识Avue

什么是Avue
- 亮点:
- 适合人群:
安装配置
使用

什么是Avue

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

亮点:

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

适合人群:

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

安装配置

新建一个vue项目
安装element-plus、@smallwei/avue、axios
在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>