ant-design-vue-admin-x

ant-design-vue-admin-x

基于 ant-design-vue 封装的后台管理组件

1.基于 ant-design-vue 封装的后台管理组件，包括 table 和 form 两大组件；
2.无需写ui组件，简单配置参数即可快速实现后台管理中大部分页面的开发，可以大幅度减少代码量，易于维护，提升开发效率；
3.集成 axios 封装的 http 请求；
4.集成了v-hasPermi 指令可以对不同角色的按钮，进行显隐的控制。

install

该组件基于ant-design-vue，也需要同时安装

npm i ant-design-vue --save
npm i ant-design-vue-admin-x --save

usage

import Vue from 'vue';
import App from './App';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import antAdminX, { GET, POST, DELETE, PUT } from 'ant-design-vue-admin-x';

Vue.use(Antd);
Vue.use(antAdminX);

Vue.prototype.$get = GET; // 将请求方法挂载值vue原型
Vue.prototype.$post = POST;
Vue.prototype.$delete = DELETE;
Vue.prototype.$put = PUT;

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});`

详情使用方法可以查看项目中 demo 示例

form表单组件

options 属性

addParam、editParam、detailParam参数

formList 配置项

uploadParam 参数

inputType 为 upload 的配置参数

能通过refs操作组件内部的方法、数据

table 组件

table options

searchList

搜索列表每项的参数

tableOptList

整个 table 操作项

rowOptList

table 每项操作按钮

columns

配置 table 每列数据

listApi

table 接口请求配置参数

addHandleParam

新增table数据的配置参数

deleteParam

单独删除或批量参数配置参数

通过refs操作组件内部方法或数据

http 使用方法

      this.$get({ // 包含四个请求方式$get、$post、$put、$delete
        url: '/users',
        params: { id: this.id },
        btnLoading: this.loading
        config: { timeout: 20000 } // axios 配置参数会合并默认参数
      }).then(({ data }) => {
        // do something
      }).catch((err) => {
        // do error handle
      });

v-hasPermi 指令

v-hasPermi="[user:list:add]" // hasPermi指令的值为 Array，角色值格式为：[a:b:c]

layout

全局layout 布局

platFormDiffer

layout 各平台差异配置，该参数目前写在组件内部

layoutRoute

每个页面的样式默认是白底，和 padding，如果要设置背景透明且没有默认padding，可以设置该项