代码拉取完成,页面将自动刷新
vue2 后台管理系统模板 gitee 地址 github 地址
后台使用node👉 node_serve
github预览地址:https://autchan-ak.github.io/vue2-admin.github.io/
本项目可作为模板进行二次开发,基础功能均可以直接复用。
ES2015+、vue、vuex、vue-router 、vue-cli 、axios
;mock
数据 ( 基于 Mockjs + webpack dev server
);store
;npm install
pnpm install
npm run serve
npm run build
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
height | Number | 500 | 编辑器高度(px) |
placeholder | String | 请输入内容 | 编辑器提示语 |
mdContent | String | 编辑器内容 v-model绑定 |
|
mode | String | editable | edit (纯编辑模式) editable (编辑与预览模式) preview (纯预览模式) |
<!-- 查看 -->
<MdEditor v-model="content" mode="preview" />
<!-- 编辑 -->
<MdEditor v-model="content" />
<ScreenTable>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
list | Array | 表头数据 | |
table | Array | 表格数据 | |
current-page | Number | 1 | 分页 |
page-size | Number | 15 | 每页条数 |
total | Number | 0 | 总条数 |
handleCurrentChange | Function | 改变页码后触发的方法 | |
handleSizeChange | Function | 改变每页条数后触发的方法 | |
tableSort | Function | 表格排序后触发的方法 | |
btns | Slot | 操作按钮区域 |
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
label | String | 表头文字 | |
prop | String | 对应数据字段 | |
showOverflowTooltip | Boolean | false | 是否显示溢出提示 |
width | String / Number | 宽度 | |
minWidth | String / Number | 最小宽度 | |
align | String | left | 对齐方式 |
type | String | 显示类型 time:时间格式|tag:标签格式 |
|
format | String | 时间格式type 为time 时生效 |
|
tag | Object | 标签数组type 为tag 时生效 |
|
sortable | String | 是否可排序 | |
sort | String | 排序方式sortable 有值时生效可选值:asc | desc |
|
slot | Slot | 自定义插槽 |
tag
参数:key为标签的索引,value为标签对象。属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
label | String | 标签文字 | |
type | String | 标签类型 success | info | warning | danger | text |
|
effect | String | 标签主题 dark | light | plain |
|
size | String | 标签大小 mini | small | medium |
<ScreenTable
:list="tableList"
:table="tableData"
:currentPage="page"
:pageSize="size"
:total="total"
@handleCurrentChange="handleCurrentChange"
@handleSizeChange="handleSizeChange"
@tableSort="tableSort"
>
<div slot="btns">
<el-button type="primary" size="small" @click="add">新增</el-button>
</div>
<div slot="operate">
<el-table-column label="操作" width="100" align="center">
<template v-slot="{ row }">
<el-button type="text" size="mini" @click="view(row)"
>查看</el-button>
</template>
</el-table-column>
</div>
</ScreenTable>
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
multiple | Boolean | false | 是否多选 |
placeholder | String | 请选择 | 提示语 |
clearable | Boolean | false | 是否可以清空选项 |
filterable | Boolean | false | 是否可搜索 |
disabled | Boolean | false | 是否禁用 |
data | Array | tree数据 | |
nodeKey | String / Number | id | 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 |
defaultProps | Object | {label: 'label',children: 'children'} | |
value / v-model | String / Number | 绑定值 | |
change | Function | 改变后触发的方法 |
<select-tree :data="list" v-model="value" @change="handleChange"/>
将 svg 保存在 /src/assets/icon
el 图标也可传入
<svg-icon icon="name" />
{
"data": "数据",
"meta": {
"msg": "提示信息",
"status": "状态码",
"type": "error||success"
}
}
"状态码":[
"200":"成功,不带弹窗",
"401":"token失效,重新登陆",
"201":"成功,带弹窗",
]
└──/assets/ 静态资源
│ ├── /icon/ svg图标
│ ├── ...
│ ├──
├── /components/ 全局组件
│ ├── index.js 自动注册 实例 入口
│ ├── ...
│ │
├── /directive/ 全局指令
│ ├── index.js 自动注册 实例 入口
│ ├── ...
│ │
├── /filters/ 全局过滤器
│ ├── index.js 自动注册 实例 入口
│ ├── ...
│ │
├── /layout/ 布局页
│ ├── ... 不多解释
│ │
├── /modules/ 模块开发
│ ├── /test/ 示例模版
│ ├── ... 页面都在此处开发
│ │
├── /request/ 请求方法
│ ├── ... 不多解释
│ │
├── /router/ 路由
│ ├── ... 不多解释
│ │
├── /store/ 数据存储
│ ├── ... 不多解释
│ │
├── /utils/ 工具方法文件夹
│ │ ├── BaseUtil.js 业务工具类
│ │ ├── ComponentUtil.js 注册组件类
│ │ ├── CryptUtil.js 加密工具类
│ │ ├── functions.js 公共方法类
│ │ ├── ProjectTools.js 保存信息类
│ │ ├── RegExpUtil.js 各种正则方法类
│ │ ├── theme.js 主题样式类
│ │ └── ...
├── package.json
├── README.md
tadpole_01
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。