关于你不知道Avue的一些用法

Avue是一个基于Element-plusopen in new window低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

简单来说可以用最简单的方式实现增删查改，其引入方式也是非常的简单：

npm i @smallwei/avue -S
yarn add @smallwei/avue -S

安装好Avue的依赖后

//需要先安装ElementPlus的依赖
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {createApp} from 'vue'
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
const app =createApp({})
app.use(ElementPlus)
app.use(Avue);

以上我们则完成了Avue的前期准备工作

接下来我们就可以直接查看Avue的官网看看一些简单的示例在页面中使用。 `

<template>
  {{form}}
  <avue-crud ref="crud"
             v-model="form"
             :option="option"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel"
             :data="data"></avue-crud>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
//获取this
let { proxy } = getCurrentInstance()
const option = ref(null)
const data = ref(null)
const form = ref({})
option.value = {
  index: true,
  column: [{
    label: '姓名',
    prop: 'name'
  }, {
    label: '年龄',
    prop: 'sex'
  }]
}
data.value = [{
  name: '张三',
  sex: 12
}, {
  name: '李四',
  sex: 13
}]
function rowSave (row, done, loading) {
  done(row)
}
function rowDel (row, index, done) {
  done(row)
}
function rowUpdate (row, index, done, loading) {
  done(row)
}
</script>

代码运行图片：

以上是适用于vue3setup语法糖的一个例子

Tips：作者发现Avue的更新有点久了 所以大多数适用于vue2版本

如果想要实现一键生成form和table页面按照上述即可生成，只需option.value下的column加一个search:true

其文档也是非常的强大已经封装好了crud模块，只需写好接口，没有心智负担，以下则是官网的封装

temp-api.js 接口的封装

export const getList = (data) => {
  return request({
    url:'/xxxx',
    method: 'post',
    data: data
  })
}
export const del = (id) => request.delete('/xxxx', {
  params: {
    id
  }
})
export const add = (data) => request({
  url: '/xxxx',
  method: 'post',
  data: data
})
export const update = (data) => request({
  url: '/xxxx',
  method: 'put',
  data: data
})

temp-option.js表单的配置项

export default (safe)=>{
  console.log(safe) //vue的this对象
  return {
    index: true,
    align: 'center',
    headerAlign: 'center',
    border: true,
    stripe: true,
    column: [{
      label: "名称(name)",
      prop: "name",
      search: true,
      rules: [{
        required: true,
        message: "请输入名称(name)",
        trigger: "blur"
      }]
    }, {
      label: "值(value)",
      prop: "value",
      search: true,
      rules: [{
        required: true,
        message: "请输入值(value)",
        trigger: "blur"
      }]
    }, {
      label: "参数(code)",
      prop: "code",
      search: true,
      rules: [{
        required: true,
        message: "请输入参数(code)",
        trigger: "blur"
      }]
    }, {
      label: '备注',
      prop: 'note'
    }],
  }
}

temp.vue 实际的使用

<template>
  <avue-crud ref="crud"
              :option="option"
              v-model:page="page"
              :table-loading="loading"
              @on-load="getList"
              @row-update="rowUpdate"
              @row-save="rowSave"
              @row-del="rowDel"
              @refresh-change="refreshChange"
              @search-reset="searchChange"
              @search-change="searchChange"
              v-model="form"
              :data="data">
  </avue-crud>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, update, add, del } from '@/temp-api.js'
import option from '@/temp-option.js'
export default {
  data () {
    return {
      page: {},
      form: {},
      params: {},
      loading: false,
      data: [],
      option: option(this)
    }
  },
  created () {

  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    getList () {
      this.loading = true;
      const data = Object.assign({
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      }, this.params)
      this.data = [];
      getList(data).then(res => {
        const data = res.data.data
        this.loading = false;
        this.page.total = data.total;
        const result = data.list;
        this.data = result;
      })
    },
    rowSave (row, done, loading) {
      add(Object.assign({
        createUser: this.userInfo.name
      }, row)).then(() => {
        this.$message.success('新增成功')
        done();
        this.getList();
      }).catch(() => {
        loading()
      })
    },
    rowUpdate (row, index, done, loading) {
      update(Object.assign({
        updateUser: this.userInfo.name
      }, row)).then(() => {
        this.$message.success('修改成功')
        done()
        this.getList();
      }).catch(() => {
        loading()
      })
    },
    rowDel (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return del(row.id)
      }).then(() => {
        this.$message.success('删除成功')
        this.getList();
      })
    },
    searchChange (params, done) {
      if (done) done();
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      this.$message.success('搜索成功')
    },
    refreshChange () {
      this.getList();
      this.$message.success('刷新成功')
    }
  }
}
</script>

以上则快速搭建了基础的增删查改页面。 具体还可以查看Avue的官网，按需使用 官网地址是avuejs.com/