# quick-el-admin **Repository Path**: xuekl/quick-el-admin ## Basic Information - **Project Name**: quick-el-admin - **Description**: 基于element-ui,以数据为中心,快速构建后台管理系统 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-10-14 - **Last Updated**: 2023-04-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # quick-el-admin ## Project setup ``` npm/cnpm install quick-el-admin --save ``` ### 起步 ``` 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中建议加入样式: ``` ### 使用 #### qc-button ``` 查询 ``` #### qc-select ``` ``` #### qc-form ``` ``` #### qc-detail-form ``` ``` #### qc-table ``` ``` ### 配置项 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', // 指定列表子集数据 } ``` ### 函数 ``` 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防抖函数 ``` ### 项目基本使用 ``` 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(`../views/modules/${path}.vue`) //path由quick-el-admin提供 } }) ``` ### Lints and fixes files ``` npm run lint ``` ### 源码地址 See [Configuration Reference](https://gitee.com/xuekl/quick-el-admin). ### 更多详细配置,请参照element-ui See [Configuration Reference](https://element.eleme.io/#/zh-CN/component/installation).