Ant-design-vue-admin-x NPM

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 属性

参数	说明	类型	默认值
formType	表单类型，modal为弹窗表单，unModal为普通表单	String	unModal
formList	自动生成表单的参数，为对象数组	Array	[]
formKey	整个表单每项绑定值的key字段，如： formKey: { title: undefined, imageId: undefined }	Object	{}
addParam	表单提交为新增数据的参数	Object	{}
editParam	表单提交为编辑数据的参数	Object	{}
detailParam	获取表单详情表单赋值的参数	Object	{}
itemLayout	表单标签 labelCol、输入控件布局样式 wrapperCol 的配置	Object	{ labelCol: { span: 8 }, wrapperCol: { span: 9 } }
reqLoading	提交按钮loading效果，一般在弹窗表单中使用，如：reqLoading: { loading: false }	Object	{}
initReqHandle	初始化页面，是否需要请求获取详情接口。一般在非弹窗表单，进入详情且不需要初始化获取详情时使用	Boolean	true
isSubmitBtn	表单是否需要提交按钮，一般在弹窗表单中使用	Boolean	true
apiOrigin	设置整个form组件接口的 baseUrl JAVA还是PHP的	String	JAVA

addParam、editParam、detailParam参数

参数	说明	类型	默认值
url	表单新增、详情、编辑数据请求接口的url	String	undefined
reqHandle	表单新增、编辑接口提交前事件，函数的参数为表单数据 values。需要在请求前处理数据时使用。此参数只有 addParam 中有该属性，put方式编辑表单前，也会调用该事件	Function	undefined
resHandle	表单在新增、编辑、详情数据，接口提交成功后的回调	Function	undefined
pathParam	编辑时参数id是路径参数还是放body, 如果id参数放body，pathParam只能为 false	Boolean	undefined

formList 配置项

参数	说明	必填	类型	默认值
label	label的名称	否	String	undefined
inputType	输入框的的表单类型，如：input，select	是	String	undefined
placeholder	输入框的提示信息	否	String	undefined
props	绑定的 key 值和 option选项为数组格式，如：key, options，详细见官网	是	Array	undefined
options	当表单该项为select、cascader之类的输入框时，选择项的数据，格式一般为： {value: 1, label: '选择项'}	否	Array	undefined
isShow	初始化是是否显示，该属性控制的是 form-item 的 v-if 属性值	否	Boolean	true
labelCol	单独设置label标签的布局	否	Object	undefined
wrapperCol	单独设置输入框的布局	否	Object	undefined
handle	输入框 change 事件处理函数	否	Function	undefined
blur	input框 blur 事件处理函数	否	Function	undefined
click	input框 click 事件处理函数	否	Function	undefined
mode	select 输入框的模式为多选或标签，可选值为'default'、 'multiple'、 'tags'、 'combobox'	否	Strign	undefined
extra	额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用，详情见官网	否	String	undefined
disabled	禁用该表单项	否	Boolean	false
treeCheckable	当inputType为 tree-select时，是否显示 checkbox	否	Boolean	undefined
fieldNames	inputType为 cascader 自定义 options 中 label、name、children 的字段	否	String	undefined
type	当 inputType 为 input ,type值为textarea、number、password分别展示为textarea输入框、number输入框、密码框	否	String	input
titles	transfer 的标题集合，详情见官网	否	String	undefined
changeOnSelect	inputType为 cascader 为 true 时，点选每级菜单选项值都会发生变化	否	Boolean	false
help	提示信息，如不设置，则会根据校验规则自动生成	否	String	undefined
isSearch	tree 组件是否展示搜索框	否	Boolean	undefined
slot	slot的name名,form-item需要自定义时使用	否	String
subList	同一个 form-item 内部嵌套多个输入框时使用,配置项和 formList 相同	否	Array	undefined
readOnly	inputType为input时，设置是否为只读	否	Boolean	undefined
labelCol	设置每项item的label宽度，整个宽度24份所占的份额	否	Number	undefined
wrapperCol	设置每项item wrapper的宽度，整个宽度24份所占的份额	否	Number	undefined
loadData	inputType 为 cascader 时，用以加载子级数据	否	Function	undefined
loadData	inputType 为 cascader 时，用以加载子级数据	否	Function	undefined
min	inputType 为 inputNumber 时，设置最小值范围	否	Number	undefined
max	inputType 为 inputNumber 时，设置最大值范围	否	Number	undefined
unit	inputType 为 inputNumber 时，输入框的单位	否	String	undefined
fileList	inputType 为 upload 时，为详情或上传成功的文件预览列表	否	Array	[]
uploadParam	inputType 为 upload 的配置参数, 详情说明见如下文档	否	Object	undefined
disabledDate	inputType 为 rangePick、rangeTimePick、datePick、dateTimePick 禁用日期控件，参数为选中日期的function	否	Function	undefined
selectChange	inputType 为 transfer时，选中项发生改变时的回调函数，参数依次为sourceKeys(左边)选中项、targetKeys(右边)选中项	否	Function	undefined
showSelectAll	inputType 为 transfer时，是否展示全选勾选框	否	Boolean	false

uploadParam 参数

inputType 为 upload 的配置参数

参数	说明	类型	默认值
url	提交接口的地址	String	/file/ht_upload
iconUrl	fileList 配置项 url 的参数，listType 为 picture ,表单赋值时 icon 的字段，一般表单详情时使用。建议使用与后台约定固定的返回格式: { fileId: '文件id', fileName: '文件名', fileUrl: ‘文件url' }	String	undefined
iconName	fileList 配置项name的参数，如果不设置会依次去获取iconUrl、prop字段。建议使用与后台约定固定的返回格式: { fileId: '文件id', fileName: '文件名', fileUrl: ‘文件url' }	String	undefined
accept	upload 选择文件的格式（只能过滤选择文件时的格式，提交前并没有验证）	String	undefined
listType	upload展示的格式，有text、picture、picture-card 三种	String	text
uploadType	和后台约定的上传文件类型	Number	4

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

方法	说明	类型
handleSubmit	表单提交方法	Function
routeQuery	表单为弹窗时，查看表单详情时该条数据的 id	String/Number
getDetail	调用获取表单详情的方法	Function
setFieldsValue	给表单赋值，ant form 内置方法	Function({ fieldName: value })
validateFields	验证表单，ant form 内置方法	Function
targetKeys	transfer 选中项的值	Array
resetSubValue	清空联动表单下级的值和下拉选项	Function([keys: string[]])

table 组件

table options

参数	说明	类型	默认值
searchList	搜索列表	Array	[]
searchParams	搜索参数，对应searchList每项的值	Object	{}
tableOptList	全局操作项	Array	[]
rowOptList	每一项的操作项	Array	[]
columns	表格列的配置数组	Array	[]
dataSource	表格默认数据	Array	[]
excludeResetKey	重置搜索忽略的字段	Array	[]
rowOptLen	每项操作项默认展示的个数	Number	3
rowSelection	table是否需要多选按钮 checkbox	Boolean	true
rowKey	单独删除或多选删除的 id 字段，也用于table循环需要的key	String	undefined
scrollWidth	设置X轴滚动的宽度	Object	{}
apiOrigin	设置整个table 组件的接口 baseUrl JAVA还是PHP的	String	JAVA
paginationParam	table的分页参数	Object	{ current: 1, pageSize: 10, total: 0, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: '10', '20', '30', '40', showTotal: total => { return `共 ${total} 条`; } }
initReqHandle	页面初始化时是否请求接口	Boolean	true
canDelKey	判断是否可以单选或多选删除每项的 key	String	'canDelete' , 'can_delete', 'isDelete', 'is_delete'
rowCheckboxAble	判断当前行是否可选，return false 可选，反之不可选当，rowSelection为true时生效	Function	false

searchList

搜索列表每项的参数

参数	说明	类型	默认
props	表单每项收集的key	Array	undefined
inputType	输入框的类型，如：input、select	String	undefined
placeholder	每项输入框的默认提示信息	String	undefined
options	如果输入框为下拉、级联等的下拉选项	Array	[]

tableOptList

整个 table 操作项

参数	说明	类型	默认
text	每项按钮的文本	String	undefined
permi	按钮权限配置，如：'community:info:add'	Array	undefined
icon	按钮图标	String	undefined
key	每项的唯一表示，不设置也ok	String	undefined

rowOptList

table 每项操作按钮

参数	说明	类型	默认
text	每项按钮的文本	String	undefined
handle	每项按钮的点击事件处理函数	Function	undefined
permi	配置每项按钮的权限,如：'community:config:query'	Array	undefined
rowOptText	自定义按钮文本,为function，参数为当前整行的数据.需配合customRender为true时生效	Function	undefined
rowOptDisHandle	判断当前按钮是否禁用，参数为当前整行的数据	Function	undefined

columns

配置 table 每列数据

参数	说明	类型	默认
title	每列的标题	String	undefined
dataIndex	每列数据的key值	String	undefined
align	对齐方式，有left、center、right，建议left	String	undefined
width	每列的宽度，可以为px或百分百	String/Number	undefined
scopedSlots	指定每列如：scopedSlots: {customRender: 'action'}。操作项customRender的值固定为 action	Object	undefined
customCell	自定义每列数据的渲染	Function(record, rowIndex)	undefined
fixed	列是否固定, 需配合scrollWith 实现x轴滚动	boolean	false

listApi

table 接口请求配置参数

参数	说明	类型	默认
url	接口地址	String	undefined
resHandle	接口成功后的回调	Function	undefined
searchHandle	搜索请求前事件	Function	undefined

addHandleParam

新增table数据的配置参数

参数	说明	类型	默认
route	需跳转的路由，为新开页时使用	String	undefined
title	跳转至新开页面的包屑名称	String	undefined

deleteParam

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

参数	说明	类型	默认
url	接口地址	String	undefined
title	删除时弹窗内容的类型名称，如：门禁设备	String	undefined
key	删除时弹窗内容的 key, 如：deviceName	String	undefined

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

参数	说明	类型
getTableList	请求接口获取表格数据	Function
showDeleteConfirm	打开删除确定框，方法参数为单条数据或多条数据数组	showDeleteConfirm(rows)
toEdit	进入该条数据表单的详情，方法参数为该条数据	toEdit(row)
setFieldsValue	设置搜索框的值	setFieldsValue（{key:value}）

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
      });

参数	说明	类型	默认值
url	接口的url。baseUrl组件内部已处理，通过process.env.VUE_APP_BASE_API获取	String	undefined
params	接口参数，get、post、put、delete都使用该字段	Object	{}
btnLoading	loading处理，格式为：{loading: false}	Object	undefined
config	自定义axios配置参数，会合并默认参数	Object	undefined
then	接口成功的方法，参数为完整的返回数据对象	Function	undefined
catch	接口失败的方法,参数为error	Function	undefined

v-hasPermi 指令

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

layout

全局layout 布局

platFormDiffer

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

参数	说明	类型
community	每个端的唯一标识，如：community	Object
menuLogo	每个端导航菜单位置的logo	url
menuTheme	每个端导航菜单的主题色，dark或right	String
asideColor	每个端导航菜单的背景色,如：#001529	String