## Project setup ``` npm/cnpm install quick-el-admin --save ```
npm install quick-el-admin
npm/cnpm install quick-el-admin --save
$3
import Vue from 'vue'
import QuickElAdmin from 'quick-el-admin'
Vue.use(QuickElAdmin)你需要在vuex store/index.js文件中
import {quickStore} from 'quick-el-admin'
...
modules: {
quickStore
}
App.vue中建议加入样式：
$3
#### qc-button
查询
#### qc-select
:config="config"
v-on="events">
#### qc-form
:form="dataForm"
:rules="dataRules"
:config="dataFormConfig">
查询
重置
#### qc-detail-form
:config="dataFormConfig"
>
#### qc-table
:columns="columns"
:config="{
lineAction: true,
lineActionWidth: 120
}"
@selection-change="handleSelectionChange">
新增
删除
编辑
删除
$3
1、qc-button
qc-button 接收element-ui基础配置
此外，在button 按钮type 为text时，新增color属性，用于改变文字颜色新增 sysClick(done) 触发函数，参数done 决定按钮点击状态，
点击一次按钮之后，需要调用done函数，才可以再次点击，
如若无需此功能，你依旧可以使用click 触发函数
2、qc-select
qc-select 基于el-select
qc-select 默认用于clearable属性，
qc-select change事件参数新增 返回当前选中条目所有属性
qc-select 拥有config属性，在config属性中接收el-select基础配置
此外config中新增配置
{
dict: '字典类型', //dict字段传入字典类型，用于为下拉框填充字典数据，无需指定label，value
url: '接口地址', //当下拉框数据，取自接口时，在url中键入接口地址
------start------当数据取自接口时，需要指定数据源的label，value---------
label: '', //指定下拉框的label
value: '', //指定下拉框的value
--------end--------------
list: [], //既不是字典，也不是接口，前端写死的列表，如字段与字典不统一，也需要指定label，value
link: '联动字段', //下拉框会存在联动效果，比如省、市、区联动，在"市"的下拉框配置 link为"省"字段，
那么在"市"级下拉框接口参数中，会传入"省"的id，参数名默认为link绑定字段，如参数名不符合你的期望，
你需要指定linkTarget属性
linkTarget: '', //用于指定联动接口的参数名
parmas: {}, //当采用url接口调用时，可能需要额外参数
typeof: 'string', //当回显拿到的数据类型与字典数据类型不一致时，typeof可以将其转换为数据字典中的类型
}
3、qc-form
qc-form基于el-form
qc-form拥有form属性，config属性
qc-form 默认注册必填校验规则，默认生成placeholder，你无需手动编写
在form属性中的字段决定这qc-form的展示，qc-form会依据form字段进行遍历显示表单
在config属性中
_baseConfig: {
span: 24, //表单各项所占宽度
labelWidth: 100, //表单label宽度
actionBlock: true, // 块级显示，决定表单按钮是否是与控件同行显示
}
"指定字段"：{
required: true, //表示此项必填
type: 'select' // 表单默认输入框控件，当指定为select时，变为下拉框
label: '字段名', //该项字段名
labelWidth： '字段宽度', //字段名所占宽度
hidden: true, //字段隐藏
span: 8, //该项所占宽度
slot: true, //开启插槽，当你的控件不是下拉框，或输入框时，需要在tempalte中插槽中定义
parentSlot: true, //当你不想寄存与el-form-item下，从el-col开始自定义书写
config: {} //当type为select时，同qc-select的config，否则同el-input的基础配置
}
4、qc-form-detail
qc-form-detail 是qc-form的详情样式，拥有_baseConfig,以及config的部分属性
5、qc-table
qc-table基于el-table
qc-table 拥有 data，column，config属性
1、data为列表的数据
2、column 遵循 [
['字段英文名', '字段中文名', '字段宽度', '插槽']
]
在字段英文名列，可以携带"::"匹配字典数据，例如：'status::status_type',可以直接显示字典的label值
匹配符号：{
:: -> 列字典翻译，例如：'status::status_type'
+ -> 多字段合并到一列显示
-> 默认值，当一个字段的默认值为空，你可以手动配置 例如：'status已完成'
}在字段宽度中
你可以写入 '200-tooltip-center' 表示当前字段 宽度200 文字过多单行显示... 居中显示
3、config
在config中配置操作列的行为
{
selection: true, //显示勾选框
index: true, //显示序号
lineAction: true, //显示操作列
lineActionWidth: 200 //操作列宽度
}
6、qc-tree (0.1.40)
qc-tree 基于el-tree
qc-tree 拥有config属性，在config属性中接收el-tree基础配置
{
url: '接口地址', // 列表数据结构
label: 'label', // 指定列表展示字段
children: 'children', // 指定列表子集数据
}
$3
quick-el-admin 中提供了一些方法
quickHttp：http请求集成
httpRequest：http请求拦截器
httpResponse：http响应拦截器
quickStore：quick-el-admin所使用的vuex模块，需要在项目内引入
setConfig：修改quick-el-admin的一些基础配置
setRoutes：设置动态路由函数
dayjs：quick-el-admin继承的dayjs函数库
setForm: 给dataForm赋值
resetForm: 重置dataForm值为空
cropForm: 去除dataForm中无需传递的字段
debounce: 返回js防抖函数
$3
import Vue from "vue";
import router from "@/router";
import QuickElAdmin, {httpResponse, httpRequest, setConfig, quickHttp, dayjs} from 'quick-el-admin'
import {getToken} from "@/utils/index";Vue.use(QuickElAdmin)
Vue.prototype.$http = quickHttp // ajax请求方法
Vue.prototype.$moment = dayjs //使用dayjs参照 https://dayjs.fenxianglu.cn/
Vue.prototype.$tbLoading = (loading) => store.commit('setTableLoading', loading) // table loading
Vue.prototype.$dict = store.getters.getDict // 获取字典
//http请求拦截
httpRequest((config) => {
if (config.url.includes('login')) {
config.headers['Authorization'] = '' // 请求头带上token
} else {
config.headers['Authorization'] = getToken() // 请求头带上token
}
}, process.env.NODE_ENV, '/proxy')
//http响应拦截
httpResponse((res) => {
}, process.env.NODE_ENV)
//quick-el-admin 的基础配置
setConfig({
//配置字典的相关属性
dict: {
url:'/system/dict/data/noPowerList',
label: 'dictLabel',
value: 'dictCode',
type: 'dictType'
},
//配置路由菜单的相关属性
router: {
url: '/getRouters', //菜单的接口路径，菜单的返回数据结构需要与服务端约定
starter: router, //VueRouter实例，作为启动器
dynamic: true, //开启动态菜单，动态菜单需要指定菜单对应的模块：import
import: (path) => () => import(
) //path由quick-el-admin提供
}
})
`
$3
npm run lint