no message
Former-commit-id: 70df143ed54e07f4c74dbebb9c85c16a5e04f504 Former-commit-id: 1a0534b7c0087f8fe19ade542d92e91d4a246b20 Former-commit-id: a481d3ebd87daf3170d60b660a951438e5a7358a
This commit is contained in:
李杨
parent
ddbfd9b526
commit
69847e9400
55
README.md
55
README.md
|
|
@ -1,21 +1,46 @@
|
|||
# d2admin-vue-element
|
||||
# D2admin-vue-element
|
||||
|
||||
> A management system framework based on vue & element
|
||||
基于 `vue.js` 和 `ElementUI` 的管理系统前端解决方案
|
||||
|
||||
## Build Setup
|
||||
<p>
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.5.2-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.0.11-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://github.com/vuejs/vuex/">
|
||||
<img src="https://img.shields.io/badge/vuex-3.0.1-brightgreen.svg" alt="vuex">
|
||||
</a>
|
||||
<a href="https://github.com/axios/axios">
|
||||
<img src="https://img.shields.io/badge/axios-0.17.1-brightgreen.svg" alt="axios">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
> 此项目只适合作为模板使用，在使用前请先检查您不需要的功能，删除相关代码和依赖插件。不建议直接作为您项目的起始代码。
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
## 功能
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
* 简约主题
|
||||
* 登陆和注销
|
||||
* 根据路由自动生成菜单
|
||||
* 可折叠侧边栏
|
||||
* 多国语言支持
|
||||
* 富文本编辑器
|
||||
* Markdown 编辑器
|
||||
* 全屏
|
||||
* Fontawesome 图标库
|
||||
* Fontawesome 图标选择器（组件）
|
||||
* 自动引入 SVG 图标
|
||||
* 前端假数据支持（ mock ）
|
||||
* 集成 G2 图表
|
||||
* 图表自适应可拖拽大小的卡片容器（示例）
|
||||
* 剪贴板操作
|
||||
* Cookie操作
|
||||
* 时间差计算工具
|
||||
* 导出 Excel （ xlsx 格式 + CSV 格式 ）
|
||||
* 导入 Excel （ xlsx 格式 + CSV 格式 ）
|
||||
* 数字动画
|
||||
* 可拖拽调整大小的切分布局
|
||||
* 可拖拽调整大小和位置的网格布局
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
```
|
||||
|
||||
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
|
|||
|
|
@ -5,6 +5,12 @@
|
|||
</div>
|
||||
<p class="page-index-article-body__title">{{title}}</p>
|
||||
<p class="page-index-article-body__sub-title dd-mt-0">{{subTitle}}</p>
|
||||
<a target="blank" href="https://github.com/FairyEver/d2admin-vue-element">
|
||||
<img
|
||||
style="position: absolute; top: 0; right: 0; border: 0;"
|
||||
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
|
||||
alt="Fork me on GitHub">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<Container type="card-full">
|
||||
<template slot="header">
|
||||
当前激活的单元格
|
||||
</template>
|
||||
<el-table v-bind="table">
|
||||
<el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
<!-- <button @click="log(scope)">测试</button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address1" label="出生地" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address2" label="现居地" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-bind="editButtonSettingMaker(scope)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import sleep from '@/utils/sleep.js'
|
||||
import Mock from 'mockjs'
|
||||
import _clonedeep from 'lodash.clonedeep'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 绑定到表格的数据
|
||||
table: {
|
||||
data: [],
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
},
|
||||
// 请求得到的原始数据
|
||||
dataOriginal: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 自动请求数据
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// 请求数据
|
||||
async getData () {
|
||||
// 拿到数据
|
||||
const data = this.dataFilter(await this.dataMaker())
|
||||
// 保存备份
|
||||
this.dataOriginal = _clonedeep(data)
|
||||
// 将值赋给表格
|
||||
this.table.data = _clonedeep(data)
|
||||
},
|
||||
// 过滤数据部分 模拟过滤掉 star 字段 并且添加 __edit 字段
|
||||
dataFilter (val) {
|
||||
const rowFilter = ({
|
||||
id = '',
|
||||
name = '',
|
||||
address1 = '',
|
||||
address2 = ''
|
||||
}) => ({
|
||||
id,
|
||||
name,
|
||||
address1,
|
||||
address2,
|
||||
__edit: false // 在这里可以添加额外的判断逻辑
|
||||
})
|
||||
return val.map(e => rowFilter(e))
|
||||
},
|
||||
// 模拟返回数据。没有必要写在全局 mock 设置中，就在这里这样写了，这样删文件的时候也好处理
|
||||
dataMaker () {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(Mock.mock({
|
||||
'list|4-10': [{
|
||||
'id|+1': 1,
|
||||
'name': '@CNAME',
|
||||
'address1': '@CITY',
|
||||
'address2': '@CITY',
|
||||
'star|1-5': '★'
|
||||
}]
|
||||
}).list)
|
||||
})
|
||||
},
|
||||
// 返回输入组件需要的参数
|
||||
inputSettingMaker (scope) {
|
||||
return {
|
||||
value: scope.row[scope.column.property],
|
||||
placeholder: scope.column.label,
|
||||
size: 'small',
|
||||
style: {
|
||||
maxWidth: '200px'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 返回编辑按钮需要的参数
|
||||
editButtonSettingMaker (scope) {
|
||||
const isEdit = scope.row.__edit
|
||||
return {
|
||||
size: 'small',
|
||||
type: isEdit ? 'primary' : ''
|
||||
}
|
||||
},
|
||||
// 测试
|
||||
log (scope) {
|
||||
console.log(scope)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,8 +2,9 @@ import Vue from 'vue'
|
|||
import { Message } from 'element-ui'
|
||||
import axios from 'axios'
|
||||
|
||||
// 在这里对返回的数据进行处理
|
||||
// 在这里添加你自己的逻辑
|
||||
axios.interceptors.response.use(res => {
|
||||
// 在这里对返回的数据进行处理
|
||||
if (res.data.code !== undefined) {
|
||||
if (res.data.code !== 0) {
|
||||
Message.error(res.data.msg)
|
||||
|
|
|
|||
|
|
@ -36,23 +36,6 @@ export const menu = {
|
|||
component: resolve => { require(['@/pages/demo/business/user-center/home/index.vue'], resolve) }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 表格
|
||||
{
|
||||
title: '表格示例',
|
||||
icon: 'table',
|
||||
children: [
|
||||
{
|
||||
title: '可编辑',
|
||||
icon: 'file-o',
|
||||
path: 'table/edit',
|
||||
name: 'demo-business-table-edit',
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
component: resolve => { require(['@/pages/demo/business/table/edit/index.vue'], resolve) }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue