docs: 📦 移除了 d2-crud 和 d2-crud-plus 的代码，对两位作者表示歉意，以后类似插件都会以链接形式推荐，都引入太大了
This commit is contained in:
FairyEver
@@ -3,9 +3,6 @@ build/
|
||||
tests/
|
||||
node_modules/
|
||||
|
||||
# D2CRUD 演示
|
||||
src/views/demo/d2-crud/
|
||||
|
||||
# node 覆盖率文件
|
||||
coverage/
|
||||
|
||||
|
||||
@@ -25,6 +25,5 @@ module.exports = [
|
||||
{ name: 'vue-grid-layout', library: 'VueGridLayout', js: 'https://cdn.jsdelivr.net/npm/vue-grid-layout@2.3.7/dist/vue-grid-layout.umd.min.js', css: '' },
|
||||
{ name: 'quill', library: 'Quill', js: 'https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js', css: '' },
|
||||
{ name: 'simplemde', library: 'SimpleMDE', js: 'https://cdn.jsdelivr.net/npm/simplemde@1.11.2/dist/simplemde.min.js', css: 'https://cdn.jsdelivr.net/npm/simplemde@1.11.2/dist/simplemde.min.css' },
|
||||
{ name: 'vue-json-tree-view', library: 'TreeView', js: 'https://cdn.jsdelivr.net/npm/vue-json-tree-view@2.1.4/dist/vue-json-tree-view.min.js', css: '' },
|
||||
{ name: '@d2-projects/d2-crud', library: 'D2Crud', js: 'https://cdn.jsdelivr.net/npm/@d2-projects/d2-crud@2.1.2/dist/d2-crud.js', css: '' }
|
||||
{ name: 'vue-json-tree-view', library: 'TreeView', js: 'https://cdn.jsdelivr.net/npm/vue-json-tree-view@2.1.4/dist/vue-json-tree-view.min.js', css: '' }
|
||||
]
|
||||
|
||||
9635
package-lock.json
generated
9635
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,6 @@
|
||||
"test:unit": "vue-cli-service test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@d2-projects/d2-crud": "^2.1.2",
|
||||
"@d2-projects/vue-table-export": "^1.0.1",
|
||||
"@d2-projects/vue-table-import": "^1.0.0",
|
||||
"axios": "^0.19.0",
|
||||
@@ -47,10 +46,7 @@
|
||||
"vue-router": "^3.1.3",
|
||||
"vue-splitpane": "^1.0.6",
|
||||
"vue-ueditor-wrap": "^2.4.1",
|
||||
"vuex": "^3.1.2",
|
||||
"d2-crud-plus": "^1.16.2",
|
||||
"d2-crud-x": "^2.10.2",
|
||||
"d2p-extends": "^1.9.11"
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@d2-projects/vue-filename-injector": "^1.1.0",
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
|
||||
<svg width="240px" height="236px" viewBox="0 0 240 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-8.000000, 0.000000)">
|
||||
<g id="d2-crud" transform="translate(8.000000, 0.000000)">
|
||||
<path d="M111.666667,132.146667 L111.666667,166.813334 C111.666667,169.022473 109.875806,170.813334 107.666667,170.813334 L72.9999997,170.813334 C70.7908607,170.813334 68.9999997,169.022473 68.9999997,166.813334 L68.9999997,132.146667 C68.9999997,129.937528 70.7908607,128.146667 72.9999997,128.146667 L107.666667,128.146667 C109.875806,128.146667 111.666667,129.937528 111.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,132.146667 L47.6666667,166.813334 C47.6666667,169.022473 45.8758057,170.813334 43.6666667,170.813334 L9,170.813334 C6.790861,170.813334 5,169.022473 5,166.813334 L5,132.146667 C5,129.937528 6.790861,128.146667 9,128.146667 L43.6666667,128.146667 C45.8758057,128.146667 47.6666667,129.937528 47.6666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,69 L47.6666667,103.666667 C47.6666667,105.875806 45.8758057,107.666667 43.6666667,107.666667 L9,107.666667 C6.790861,107.666667 5,105.875806 5,103.666667 L5,69 C5,66.790861 6.790861,65 9,65 L43.6666667,65 C45.8758057,65 47.6666667,66.790861 47.6666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M111.666667,69 L111.666667,103.666667 C111.666667,105.875806 109.875806,107.666667 107.666667,107.666667 L72.9999997,107.666667 C70.7908607,107.666667 68.9999997,105.875806 68.9999997,103.666667 L68.9999997,69 C68.9999997,66.790861 70.7908607,65 72.9999997,65 L107.666667,65 C109.875806,65 111.666667,66.790861 111.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,132.146667 L175.666667,166.813334 C175.666667,169.022473 173.875806,170.813334 171.666667,170.813334 L137,170.813334 C134.790861,170.813334 133,169.022473 133,166.813334 L133,132.146667 C133,129.937528 134.790861,128.146667 137,128.146667 L171.666667,128.146667 C173.875806,128.146667 175.666667,129.937528 175.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,69 L175.666667,103.666667 C175.666667,105.875806 173.875806,107.666667 171.666667,107.666667 L137,107.666667 C134.790861,107.666667 133,105.875806 133,103.666667 L133,69 C133,66.790861 134.790861,65 137,65 L171.666667,65 C173.875806,65 175.666667,66.790861 175.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,197 L47.6666667,231.666667 C47.6666667,233.875806 45.8758057,235.666667 43.6666667,235.666667 L9,235.666667 C6.790861,235.666667 5,233.875806 5,231.666667 L5,197 C5,194.790861 6.790861,193 9,193 L43.6666667,193 C45.8758057,193 47.6666667,194.790861 47.6666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,197 L175.666667,231.666667 C175.666667,233.875806 173.875806,235.666667 171.666667,235.666667 L137,235.666667 C134.790861,235.666667 133,233.875806 133,231.666667 L133,197 C133,194.790861 134.790861,193 137,193 L171.666667,193 C173.875806,193 175.666667,194.790861 175.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M111.666667,197 L111.666667,231.666667 C111.666667,233.875806 109.875806,235.666667 107.666667,235.666667 L72.9999997,235.666667 C70.7908607,235.666667 68.9999997,233.875806 68.9999997,231.666667 L68.9999997,197 C68.9999997,194.790861 70.7908607,193 72.9999997,193 L107.666667,193 C109.875806,193 111.666667,194.790861 111.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<rect fill="#35495E" x="176" y="19" width="64" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(208.000000, 32.000000) rotate(-270.000000) translate(-208.000000, -32.000000) " x="176" y="19" width="64" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(208.500000, 159.000000) rotate(-270.000000) translate(-208.500000, -159.000000) " x="132" y="146" width="153" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(78.000000, 32.000000) rotate(-180.000000) translate(-78.000000, -32.000000) " x="0" y="19" width="156" height="26" rx="4"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.4 KiB |
@@ -1,26 +0,0 @@
|
||||
|
||||
<svg viewBox="0 0 256 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon/500/crud" transform="translate(-122.000000, -132.000000)" fill-rule="nonzero">
|
||||
<g id="table-(1)" transform="translate(122.000000, 132.000000)">
|
||||
<path d="M192,132.24 L192,166.906667 C192,169.115806 190.209139,170.906667 188,170.906667 L153.333333,170.906667 C151.124194,170.906667 149.333333,169.115806 149.333333,166.906667 L149.333333,132.24 C149.333333,130.030861 151.124194,128.24 153.333333,128.24 L188,128.24 C190.209139,128.24 192,130.030861 192,132.24 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M128,132.24 L128,166.906667 C128,169.115806 126.209139,170.906667 124,170.906667 L89.3333333,170.906667 C87.1241943,170.906667 85.3333333,169.115806 85.3333333,166.906667 L85.3333333,132.24 C85.3333333,130.030861 87.1241943,128.24 89.3333333,128.24 L124,128.24 C126.209139,128.24 128,130.030861 128,132.24 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M64,132.24 L64,166.906667 C64,169.115806 62.209139,170.906667 60,170.906667 L4,170.906667 C1.790861,170.906667 2.705415e-16,169.115806 0,166.906667 L0,132.24 C-2.705415e-16,130.030861 1.790861,128.24 4,128.24 L60,128.24 C62.209139,128.24 64,130.030861 64,132.24 Z" id="Shape" fill="#35495E"></path>
|
||||
<path d="M128,69.0933333 L128,103.76 C128,105.969139 126.209139,107.76 124,107.76 L89.3333333,107.76 C87.1241943,107.76 85.3333333,105.969139 85.3333333,103.76 L85.3333333,69.0933333 C85.3333333,66.8841943 87.1241943,65.0933333 89.3333333,65.0933333 L124,65.0933333 C126.209139,65.0933333 128,66.8841943 128,69.0933333 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M64,4.24 L64,38.9066667 C64,41.1158057 62.209139,42.9066667 60,42.9066667 L4,42.9066667 C1.790861,42.9066667 2.705415e-16,41.1158057 0,38.9066667 L0,4.24 C-2.705415e-16,2.030861 1.790861,0.24 4,0.24 L60,0.24 C62.209139,0.24 64,2.030861 64,4.24 Z" id="Shape" fill="#35495E"></path>
|
||||
<path d="M192,69.0933333 L192,103.76 C192,105.969139 190.209139,107.76 188,107.76 L153.333333,107.76 C151.124194,107.76 149.333333,105.969139 149.333333,103.76 L149.333333,69.0933333 C149.333333,66.8841943 151.124194,65.0933333 153.333333,65.0933333 L188,65.0933333 C190.209139,65.0933333 192,66.8841943 192,69.0933333 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M64,69.0933333 L64,103.76 C64,105.969139 62.209139,107.76 60,107.76 L4,107.76 C1.790861,107.76 2.705415e-16,105.969139 0,103.76 L0,69.0933333 C-2.705415e-16,66.8841943 1.790861,65.0933333 4,65.0933333 L60,65.0933333 C62.209139,65.0933333 64,66.8841943 64,69.0933333 Z" id="Shape" fill="#35495E"></path>
|
||||
<path d="M256,132.24 L256,166.906667 C256,169.115806 254.209139,170.906667 252,170.906667 L217.333333,170.906667 C215.124194,170.906667 213.333333,169.115806 213.333333,166.906667 L213.333333,132.24 C213.333333,130.030861 215.124194,128.24 217.333333,128.24 L252,128.24 C254.209139,128.24 256,130.030861 256,132.24 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M256,69.0933333 L256,103.76 C256,105.969139 254.209139,107.76 252,107.76 L217.333333,107.76 C215.124194,107.76 213.333333,105.969139 213.333333,103.76 L213.333333,69.0933333 C213.333333,66.8841943 215.124194,65.0933333 217.333333,65.0933333 L252,65.0933333 C254.209139,65.0933333 256,66.8841943 256,69.0933333 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M256,4.24 L256,38.9066667 C256,41.1158057 254.209139,42.9066667 252,42.9066667 L89.3333333,42.9066667 C87.1241943,42.9066667 85.3333333,41.1158057 85.3333333,38.9066667 L85.3333333,4.24 C85.3333333,2.030861 87.1241943,0.24 89.3333333,0.24 L252,0.24 C254.209139,0.24 256,2.030861 256,4.24 Z" id="Shape" fill="#35495E"></path>
|
||||
<path d="M128,197.093333 L128,231.76 C128,233.969139 126.209139,235.76 124,235.76 L89.3333333,235.76 C87.1241943,235.76 85.3333333,233.969139 85.3333333,231.76 L85.3333333,197.093333 C85.3333333,194.884194 87.1241943,193.093333 89.3333333,193.093333 L124,193.093333 C126.209139,193.093333 128,194.884194 128,197.093333 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M64,197.093333 L64,231.76 C64,233.969139 62.209139,235.76 60,235.76 L4,235.76 C1.790861,235.76 2.705415e-16,233.969139 0,231.76 L0,197.093333 C-2.705415e-16,194.884194 1.790861,193.093333 4,193.093333 L60,193.093333 C62.209139,193.093333 64,194.884194 64,197.093333 Z" id="Shape" fill="#35495E"></path>
|
||||
<path d="M256,197.093333 L256,231.76 C256,233.969139 254.209139,235.76 252,235.76 L217.333333,235.76 C215.124194,235.76 213.333333,233.969139 213.333333,231.76 L213.333333,197.093333 C213.333333,194.884194 215.124194,193.093333 217.333333,193.093333 L252,193.093333 C254.209139,193.093333 256,194.884194 256,197.093333 Z" id="Shape" fill="#409EFF"></path>
|
||||
<path d="M192,197.093333 L192,231.76 C192,233.969139 190.209139,235.76 188,235.76 L153.333333,235.76 C151.124194,235.76 149.333333,233.969139 149.333333,231.76 L149.333333,197.093333 C149.333333,194.884194 151.124194,193.093333 153.333333,193.093333 L188,193.093333 C190.209139,193.093333 192,194.884194 192,197.093333 Z" id="Shape" fill="#409EFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 5.4 KiB |
@@ -6,10 +6,6 @@ import demoPlugins from './modules/demo-plugins'
|
||||
import demoComponents from './modules/demo-components'
|
||||
// 功能
|
||||
import demoPlayground from './modules/demo-playground'
|
||||
// CRUD
|
||||
import demoD2Crud from './modules/demo-d2-crud'
|
||||
// CRUD PLUS
|
||||
import demoD2CrudPlus from './modules/demo-d2-crud-plus'
|
||||
|
||||
/**
|
||||
* @description 给菜单数据补充上 path 字段
|
||||
@@ -30,9 +26,7 @@ function supplementPath (menu) {
|
||||
export const menuAside = supplementPath([
|
||||
demoComponents,
|
||||
demoPlugins,
|
||||
demoPlayground,
|
||||
demoD2Crud,
|
||||
demoD2CrudPlus
|
||||
demoPlayground
|
||||
])
|
||||
|
||||
// 菜单 顶栏
|
||||
@@ -44,13 +38,5 @@ export const menuHeader = supplementPath([
|
||||
},
|
||||
demoPlayground,
|
||||
demoComponents,
|
||||
demoPlugins,
|
||||
{
|
||||
title: '社区插件',
|
||||
icon: 'puzzle-piece',
|
||||
children: [
|
||||
demoD2Crud,
|
||||
demoD2CrudPlus
|
||||
]
|
||||
}
|
||||
demoPlugins
|
||||
])
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import '@/views/demo/d2-crud-plus/install'
|
||||
export default {
|
||||
path: '/demo/d2-crud-plus',
|
||||
title: 'D2 CRUD PLUS',
|
||||
iconSvg: 'd2-crud-plus',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: 'D2 CRUD PLUS', icon: 'home' },
|
||||
{
|
||||
title: '简单示例',
|
||||
path: `${pre}demo`
|
||||
},
|
||||
{
|
||||
title: '表单分组',
|
||||
path: `${pre}group`
|
||||
},
|
||||
{
|
||||
title: '综合示例',
|
||||
path: `${pre}synthesize`
|
||||
},
|
||||
{
|
||||
title: '权限管理',
|
||||
icon: 'link',
|
||||
path: 'http://qiniu.veryreader.com/D2CrudPlusExample/#/permission/resource'
|
||||
},
|
||||
{
|
||||
title: '更多示例',
|
||||
icon: 'link',
|
||||
path: 'http://qiniu.veryreader.com/D2CrudPlusExample/'
|
||||
},
|
||||
{
|
||||
title: '帮助文档',
|
||||
icon: 'link',
|
||||
path: 'http://greper.gitee.io/d2-crud-plus/'
|
||||
}
|
||||
|
||||
])('/demo/d2-crud-plus/')
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
export default {
|
||||
path: '/demo/d2-crud',
|
||||
title: 'D2 CRUD v2',
|
||||
iconSvg: 'd2-crud',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: 'D2 CRUD v2', icon: 'home' },
|
||||
{
|
||||
title: '基础功能',
|
||||
children: [
|
||||
{ path: `${pre}demo1`, title: '基础表格' },
|
||||
{ path: `${pre}demo27`, title: '加载状态' },
|
||||
{ path: `${pre}demo28`, title: '自定义加载状态' },
|
||||
{ path: `${pre}demo2`, title: '带斑马纹表格' },
|
||||
{ path: `${pre}demo3`, title: '带边框表格' },
|
||||
{ path: `${pre}demo4`, title: '带状态表格' },
|
||||
{ path: `${pre}demo5`, title: '固定表头' },
|
||||
{ path: `${pre}demo6`, title: '固定列' },
|
||||
{ path: `${pre}demo7`, title: '流体高度' },
|
||||
{ path: `${pre}demo8`, title: '多级表头' },
|
||||
{ path: `${pre}demo9`, title: '单选' },
|
||||
{ path: `${pre}demo10`, title: '多选' },
|
||||
{ path: `${pre}demo11`, title: '排序' },
|
||||
{ path: `${pre}demo12`, title: '筛选' },
|
||||
{ path: `${pre}demo13`, title: '表尾合计行' },
|
||||
{ path: `${pre}demo14`, title: '合并行' },
|
||||
{ path: `${pre}demo15`, title: '合并列' },
|
||||
{ path: `${pre}demo24`, title: '表格slot' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '数据操作',
|
||||
children: [
|
||||
{ path: `${pre}demo29`, title: '分页' },
|
||||
{ path: `${pre}demo16`, title: '新增数据' },
|
||||
{ path: `${pre}demo17`, title: '修改数据' },
|
||||
{ path: `${pre}demo18`, title: '删除数据' },
|
||||
{ path: `${pre}demo19`, title: '自定义操作列' },
|
||||
{ path: `${pre}demo20`, title: '表单组件渲染' },
|
||||
{ path: `${pre}demo21`, title: '表单布局' },
|
||||
{ path: `${pre}demo22`, title: '表单校验' },
|
||||
{ path: `${pre}demo23`, title: '表格内编辑' },
|
||||
{ path: `${pre}demo25`, title: '表格自定义组件' },
|
||||
{ path: `${pre}demo30`, title: '表单事件监听' },
|
||||
{ path: `${pre}demo26`, title: '表单自定义组件' },
|
||||
{ path: `${pre}demo31`, title: 'CRUD事件' }
|
||||
]
|
||||
}
|
||||
])('/demo/d2-crud/')
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/d2-crud-plus',
|
||||
name: 'demo-d2-crud-plus',
|
||||
meta,
|
||||
redirect: { name: 'demo-d2-crud-plus-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/d2-crud-plus/index'), meta: { ...meta, title: 'D2 CRUD PLUS 首页' } },
|
||||
{ path: 'demo', name: `${pre}demo`, component: _import('demo/d2-crud-plus/demo'), meta: { ...meta, title: '简单示例' } },
|
||||
{ path: 'group', name: `${pre}group`, component: _import('demo/d2-crud-plus/group'), meta: { ...meta, title: '表单分组' } },
|
||||
{ path: 'synthesize', name: `${pre}synthesize`, component: _import('demo/d2-crud-plus/synthesize'), meta: { ...meta, title: '综合示例' } }
|
||||
|
||||
])('demo-d2-crud-plus-')
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/d2-crud',
|
||||
name: 'demo-d2-crud',
|
||||
meta,
|
||||
redirect: { name: 'demo-d2-crud-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/d2-crud/index'), meta: { ...meta, title: 'D2 CRUD v2 首页' } },
|
||||
{ path: 'demo1', name: `${pre}demo1`, component: _import('demo/d2-crud/demo1'), meta: { ...meta, title: '基础表格' } },
|
||||
{ path: 'demo2', name: `${pre}demo2`, component: _import('demo/d2-crud/demo2'), meta: { ...meta, title: '带斑马纹表格' } },
|
||||
{ path: 'demo3', name: `${pre}demo3`, component: _import('demo/d2-crud/demo3'), meta: { ...meta, title: '带边框表格' } },
|
||||
{ path: 'demo4', name: `${pre}demo4`, component: _import('demo/d2-crud/demo4'), meta: { ...meta, title: '带状态表格' } },
|
||||
{ path: 'demo5', name: `${pre}demo5`, component: _import('demo/d2-crud/demo5'), meta: { ...meta, title: '固定表头' } },
|
||||
{ path: 'demo6', name: `${pre}demo6`, component: _import('demo/d2-crud/demo6'), meta: { ...meta, title: '固定列' } },
|
||||
{ path: 'demo7', name: `${pre}demo7`, component: _import('demo/d2-crud/demo7'), meta: { ...meta, title: '流体高度' } },
|
||||
{ path: 'demo8', name: `${pre}demo8`, component: _import('demo/d2-crud/demo8'), meta: { ...meta, title: '多级表头' } },
|
||||
{ path: 'demo9', name: `${pre}demo9`, component: _import('demo/d2-crud/demo9'), meta: { ...meta, title: '单选' } },
|
||||
{ path: 'demo10', name: `${pre}demo10`, component: _import('demo/d2-crud/demo10'), meta: { ...meta, title: '多选' } },
|
||||
{ path: 'demo11', name: `${pre}demo11`, component: _import('demo/d2-crud/demo11'), meta: { ...meta, title: '排序' } },
|
||||
{ path: 'demo12', name: `${pre}demo12`, component: _import('demo/d2-crud/demo12'), meta: { ...meta, title: '筛选' } },
|
||||
{ path: 'demo13', name: `${pre}demo13`, component: _import('demo/d2-crud/demo13'), meta: { ...meta, title: '表尾合计行' } },
|
||||
{ path: 'demo14', name: `${pre}demo14`, component: _import('demo/d2-crud/demo14'), meta: { ...meta, title: '合并行' } },
|
||||
{ path: 'demo15', name: `${pre}demo15`, component: _import('demo/d2-crud/demo15'), meta: { ...meta, title: '合并列' } },
|
||||
{ path: 'demo16', name: `${pre}demo16`, component: _import('demo/d2-crud/demo16'), meta: { ...meta, title: '新增数据' } },
|
||||
{ path: 'demo17', name: `${pre}demo17`, component: _import('demo/d2-crud/demo17'), meta: { ...meta, title: '修改数据' } },
|
||||
{ path: 'demo18', name: `${pre}demo18`, component: _import('demo/d2-crud/demo18'), meta: { ...meta, title: '删除数据' } },
|
||||
{ path: 'demo19', name: `${pre}demo19`, component: _import('demo/d2-crud/demo19'), meta: { ...meta, title: '自定义操作列' } },
|
||||
{ path: 'demo20', name: `${pre}demo20`, component: _import('demo/d2-crud/demo20'), meta: { ...meta, title: '表单组件渲染' } },
|
||||
{ path: 'demo21', name: `${pre}demo21`, component: _import('demo/d2-crud/demo21'), meta: { ...meta, title: '表单布局' } },
|
||||
{ path: 'demo22', name: `${pre}demo22`, component: _import('demo/d2-crud/demo22'), meta: { ...meta, title: '表单校验' } },
|
||||
{ path: 'demo23', name: `${pre}demo23`, component: _import('demo/d2-crud/demo23'), meta: { ...meta, title: '表格内编辑' } },
|
||||
{ path: 'demo24', name: `${pre}demo24`, component: _import('demo/d2-crud/demo24'), meta: { ...meta, title: '表格slot' } },
|
||||
{ path: 'demo25', name: `${pre}demo25`, component: _import('demo/d2-crud/demo25'), meta: { ...meta, title: '表格自定义组件' } },
|
||||
{ path: 'demo26', name: `${pre}demo26`, component: _import('demo/d2-crud/demo26'), meta: { ...meta, title: '表单自定义组件' } },
|
||||
{ path: 'demo27', name: `${pre}demo27`, component: _import('demo/d2-crud/demo27'), meta: { ...meta, title: '加载状态' } },
|
||||
{ path: 'demo28', name: `${pre}demo28`, component: _import('demo/d2-crud/demo28'), meta: { ...meta, title: '自定义加载状态' } },
|
||||
{ path: 'demo29', name: `${pre}demo29`, component: _import('demo/d2-crud/demo29'), meta: { ...meta, title: '分页' } },
|
||||
{ path: 'demo30', name: `${pre}demo30`, component: _import('demo/d2-crud/demo30'), meta: { ...meta, title: '表单事件监听' } },
|
||||
{ path: 'demo31', name: `${pre}demo31`, component: _import('demo/d2-crud/demo31'), meta: { ...meta, title: 'CRUD事件' } }
|
||||
])('demo-d2-crud-')
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
import playground from './modules/playground'
|
||||
import d2Crud from './modules/d2-crud'
|
||||
import d2CrudPlus from './modules/d2-crud-plus'
|
||||
import plugins from './modules/plugins'
|
||||
import components from './modules/components'
|
||||
|
||||
@@ -55,8 +53,6 @@ const frameIn = [
|
||||
]
|
||||
},
|
||||
playground,
|
||||
d2Crud,
|
||||
d2CrudPlus,
|
||||
plugins,
|
||||
components
|
||||
]
|
||||
|
||||
@@ -10,7 +10,6 @@ export default {
|
||||
versionShow () {
|
||||
util.log.capsule('D2Admin', `v${process.env.VUE_APP_VERSION}`)
|
||||
console.log('D2 Admin https://github.com/d2-projects/d2-admin')
|
||||
console.log('D2 Crud https://github.com/d2-projects/d2-crud')
|
||||
console.log('Document https://d2.pub/zh/doc/d2-admin')
|
||||
console.log('请不要吝啬您的 star，谢谢 ~')
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
// 请求真实后端
|
||||
// import { request } from '@/api/service'
|
||||
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
export const crudOptions = (vm) => {
|
||||
return {
|
||||
viewOptions: {
|
||||
componentType: 'row' // 查看对话框字段使用行组件
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
sortable: true,
|
||||
search: { disabled: false },
|
||||
type: 'select',
|
||||
dict: {
|
||||
url: '/d2crudplus/dicts/OpenStatusEnum'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'address',
|
||||
sortable: true,
|
||||
width: 180,
|
||||
search: { disabled: false },
|
||||
type: 'select',
|
||||
form: {
|
||||
component: {
|
||||
props: {
|
||||
multiple: true // 多选
|
||||
}
|
||||
}
|
||||
},
|
||||
dict: {
|
||||
data: [{ value: 'sz', label: '深圳' }, { value: 'gz', label: '广州' }, { value: 'wh', label: '武汉' }, { value: 'sh', label: '上海' }]
|
||||
},
|
||||
component: { props: { color: 'auto' } } // 自动染色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">简单示例
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
>
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
<el-button-group>
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
|
||||
</el-button-group>
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
|
||||
</div>
|
||||
</d2-crud-x>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from './api'
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
export default {
|
||||
name: 'formSelect',
|
||||
mixins: [d2CrudPlus.crud],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions(this)
|
||||
},
|
||||
pageRequest (query) {
|
||||
return api.GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return api.AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return api.UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return api.DelObj(row.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,49 +0,0 @@
|
||||
import mockUtil from '../mock/base'
|
||||
const options = {
|
||||
name: 'd2crudplus/test',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
status: '0',
|
||||
address: 'sz'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
status: '1',
|
||||
address: 'sh,sz'
|
||||
},
|
||||
{
|
||||
date: 2232433534511,
|
||||
status: '1',
|
||||
address: 'gz'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
status: '2',
|
||||
address: 'wh,gz'
|
||||
}
|
||||
]
|
||||
const openStatus = [
|
||||
{ value: '1', label: '打开', color: 'success' },
|
||||
{ value: '2', label: '停止', color: 'info' },
|
||||
{ value: '0', label: '关闭', color: 'danger' }
|
||||
]
|
||||
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
mock.push(
|
||||
{
|
||||
path: '/d2crudplus/dicts/OpenStatusEnum',
|
||||
method: 'get',
|
||||
handle ({ body }) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: openStatus
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
export default mock
|
||||
@@ -1,36 +0,0 @@
|
||||
// 请求真实后端
|
||||
// import { request } from '@/api/service'
|
||||
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
export const crudOptions = {
|
||||
options: {
|
||||
height: '100%' // 表格高度100%, 使用toolbar必须设置
|
||||
},
|
||||
viewOptions: {
|
||||
disabled: false
|
||||
},
|
||||
rowHandle: {
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '商品标题',
|
||||
key: 'title',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '商品代码',
|
||||
key: 'code',
|
||||
search: { disabled: false },
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
key: 'images',
|
||||
sortable: true,
|
||||
type: 'image-uploader',
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
key: 'price',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
key: 'store',
|
||||
sortable: true,
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
title: '简介',
|
||||
key: 'intro',
|
||||
sortable: true,
|
||||
type: 'text-area'
|
||||
},
|
||||
{
|
||||
title: '详情',
|
||||
key: 'content',
|
||||
sortable: true,
|
||||
type: 'editor-quill',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '自定义',
|
||||
key: 'custom',
|
||||
sortable: true,
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
},
|
||||
slot: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '自定义2',
|
||||
key: 'custom2',
|
||||
sortable: true,
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
},
|
||||
slot: true
|
||||
}
|
||||
}
|
||||
],
|
||||
formGroup: {
|
||||
type: 'collapse', // tab
|
||||
accordion: false,
|
||||
groups: {
|
||||
base: {
|
||||
title: '商品基础',
|
||||
icon: 'el-icon-goods',
|
||||
columns: ['title', 'code', 'images']
|
||||
},
|
||||
price: {
|
||||
title: '库存价格',
|
||||
icon: 'el-icon-price-tag',
|
||||
columns: ['store', 'price']
|
||||
},
|
||||
info: {
|
||||
title: '详情',
|
||||
collapsed: false,
|
||||
icon: 'el-icon-warning-outline',
|
||||
columns: ['intro', 'content']
|
||||
},
|
||||
custom: {
|
||||
title: '自定义',
|
||||
collapsed: true,
|
||||
show (context) {
|
||||
console.log('custom context', context)
|
||||
return context.mode === 'view'
|
||||
},
|
||||
disabled: false,
|
||||
icon: 'el-icon-warning-outline',
|
||||
columns: ['custom', 'custom2']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">表单分组
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
>
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
</div>
|
||||
<div slot="priceGroupTitleSlot" slot-scope="scope">
|
||||
<h3 style="display: inline;" class="group-title"> <i class="header-icon" :class="scope.group.icon"/> {{scope.group.title}}</h3>
|
||||
<span style="margin-left:10px">（我是自定义标题）</span>
|
||||
</div>
|
||||
|
||||
<div slot="customFormSlot" >
|
||||
<span >自定义选项</span>
|
||||
</div>
|
||||
|
||||
</d2-crud-x>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import { GetList, AddObj, UpdateObj, DelObj } from './api'
|
||||
export default {
|
||||
name: 'formGroup',
|
||||
mixins: [d2CrudPlus.crud],
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions
|
||||
},
|
||||
pageRequest (query) {
|
||||
return GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return DelObj(row.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.d2-crud .group-title{color:#67c23a}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
import mockUtil from '../mock/base'
|
||||
|
||||
const options = {
|
||||
name: 'd2crudplus/group',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
title: '无线充电宝',
|
||||
code: '100001',
|
||||
images: 'https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png',
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: '30000毫安超大容量移动电源充电宝官方原装正品专用便携',
|
||||
content: ''
|
||||
}
|
||||
]
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
export default mock
|
||||
@@ -1,31 +0,0 @@
|
||||
export default `columns: [
|
||||
{
|
||||
title: '日期', //字段名称
|
||||
key: 'date', //字段key
|
||||
type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
type: 'select', //选择框，默认单选
|
||||
dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'address',
|
||||
type: 'select', //选择框
|
||||
form: { //表单组件自定义配置
|
||||
component: { //支持任何v-model组件
|
||||
props: { multiple: true } // 此处配置选择框为多选
|
||||
}
|
||||
},
|
||||
dict: {
|
||||
data: [ //本地数据字典
|
||||
{ value: 'sz', label: '深圳' },
|
||||
{ value: 'gz', label: '广州' },
|
||||
{ value: 'wh', label: '武汉' },
|
||||
{ value: 'sh', label: '上海' }
|
||||
]
|
||||
}
|
||||
}
|
||||
]`
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 712 KiB |
@@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<el-tabs v-model="tab">
|
||||
<el-tab-pane label="效果" name="result">
|
||||
<img src="./image/gif.webp" style="width: 600px; border: 1px solid #E4E7ED; border-radius: 4px;">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="代码" name="code">
|
||||
<d2-highlight :code="code" lang="javascript"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import code from './code'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
code,
|
||||
tab: 'result',
|
||||
banner: {
|
||||
title: 'D2 CRUD PLUS',
|
||||
subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
|
||||
link: 'https://github.com/greper/d2-crud-plus'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import d2CrudX from 'd2-crud-x'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import { D2pAreaSelector, D2pFileUploader, D2pIconSelector, D2pTreeSelector, D2pFullEditor, D2pUploader, D2pDemoExtend } from 'd2p-extends' // 源码方式引入，上传组件支持懒加载
|
||||
// http请求
|
||||
import { requestForMock } from '@/api/service'
|
||||
import './mock' // 模拟数据
|
||||
|
||||
// 按如下重命名引入可与官方版共存，index.vue中标签用<d2-crud-x />使用加强版
|
||||
// 不传name，则d2CrudX的标签仍为<d2-crud>,不可与官方版共存
|
||||
Vue.use(d2CrudX, { name: 'd2-crud-x' })
|
||||
|
||||
// 引入d2CrudPlus
|
||||
Vue.use(d2CrudPlus, {
|
||||
starTip: false,
|
||||
getRemoteDictFunc (url, dict) {
|
||||
// 此处配置你的字典http请求方法
|
||||
// 实际使用请改成request
|
||||
return requestForMock({
|
||||
url: url,
|
||||
data: dict.body,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
commonOption () { // 公共配置
|
||||
return {
|
||||
format: {
|
||||
response (res) {
|
||||
return res
|
||||
},
|
||||
page: { // page接口返回的数据结构配置，
|
||||
request: {
|
||||
current: 'current',
|
||||
size: 'size'
|
||||
},
|
||||
response: {
|
||||
current: 'current', // 当前页码 ret.data.current
|
||||
size: 'size', // 当前页码 ret.data.current
|
||||
// size: (data) => { return data.size }, // 每页条数，ret.data.size, 你也可以配置一个方法，自定义返回
|
||||
total: 'total', // 总记录数 ret.data.total
|
||||
records: 'records' // 列表数组 ret.data.records
|
||||
}
|
||||
}
|
||||
},
|
||||
pageOptions: {
|
||||
compact: true // 紧凑型页面模式
|
||||
},
|
||||
options: {
|
||||
size: 'small',
|
||||
height: '100%' // 表格高度100%
|
||||
},
|
||||
formOptions: {
|
||||
nullToBlankStr: true, // 提交修改表单时，将undefinded的数据修改为空字符串''，可以解决无法清空字段的问题
|
||||
defaultSpan: 12 // 默认的表单 span
|
||||
},
|
||||
viewOptions: {
|
||||
disabled: false,
|
||||
componentType: 'form' // 【form,row】 表单组件 或 行组件展示
|
||||
},
|
||||
rowHandle: {
|
||||
width: 260,
|
||||
edit: {
|
||||
type: 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 安装扩展插件
|
||||
Vue.use(D2pTreeSelector)
|
||||
Vue.use(D2pAreaSelector)
|
||||
Vue.use(D2pIconSelector)
|
||||
Vue.use(D2pFullEditor, {
|
||||
ueditor: {
|
||||
serverUrl: '/api/ueditor/'
|
||||
}
|
||||
})
|
||||
Vue.use(D2pDemoExtend)
|
||||
Vue.use(D2pFileUploader)
|
||||
Vue.use(D2pUploader, {
|
||||
defaultType: 'form',
|
||||
form: {
|
||||
action: 'http://d2p.veryreader.com:7070/api/upload/form/upload',
|
||||
name: 'file',
|
||||
successHandle (res) { // 上传成功后，后台返回结果处理
|
||||
return { url: 'http://d2p.veryreader.com:7070' + res.data } // data是该文件的url
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,234 +0,0 @@
|
||||
function copyList (originList, newList, options, parentId) {
|
||||
for (const item of originList) {
|
||||
const newItem = { ...item, parentId }
|
||||
newItem.id = ++options.idGenerator
|
||||
newList.push(newItem)
|
||||
if (item.children != null) {
|
||||
newItem.children = []
|
||||
copyList(item.children, newItem.children, options, newItem.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function delById (req, list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i]
|
||||
if ((item.id) === parseInt(req.params.id)) {
|
||||
console.log('remove i')
|
||||
list.splice(i, 1)
|
||||
break
|
||||
}
|
||||
if (item.children != null && item.children.length > 0) {
|
||||
delById(req, item.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
findById (id, list) {
|
||||
for (const item of list) {
|
||||
if (item.id === id) {
|
||||
return item
|
||||
}
|
||||
if (item.children != null && item.children.length > 0) {
|
||||
const sub = this.findById(id, item.children)
|
||||
if (sub != null) {
|
||||
return sub
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
buildMock (options) {
|
||||
const name = options.name
|
||||
if (options.copyTimes == null) {
|
||||
options.copyTimes = 29
|
||||
}
|
||||
const list = []
|
||||
for (let i = 0; i < options.copyTimes; i++) {
|
||||
copyList(options.list, list, options)
|
||||
}
|
||||
options.list = list
|
||||
return [
|
||||
{
|
||||
path: '/' + name + '/page',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
let data = list
|
||||
let size = 20
|
||||
let current = 1
|
||||
for (const item of list) {
|
||||
if (item.children != null && item.children.length === 0) {
|
||||
item.hasChildren = false
|
||||
item.lazy = false
|
||||
}
|
||||
}
|
||||
if (req != null && req.body != null) {
|
||||
if (req.body.size != null) {
|
||||
size = parseInt(req.body.size)
|
||||
}
|
||||
if (req.body.current != null) {
|
||||
current = parseInt(req.body.current)
|
||||
}
|
||||
const query = { ...req.body }
|
||||
delete query.current
|
||||
delete query.size
|
||||
if (Object.keys(query).length > 0) {
|
||||
data = list.filter(item => {
|
||||
let allFound = true // 是否所有条件都符合
|
||||
for (const key in query) {
|
||||
// 判定某一个条件
|
||||
const value = query[key]
|
||||
if (value == null || value === '') {
|
||||
continue
|
||||
}
|
||||
if (value instanceof Array) {
|
||||
// 如果条件中的value是数组的话，只要查到一个就行
|
||||
if (value.length === 0) {
|
||||
continue
|
||||
}
|
||||
let found = false
|
||||
for (const i of value) {
|
||||
if (item[key] instanceof Array) {
|
||||
for (const j of item[key]) {
|
||||
if (i === j) {
|
||||
found = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (found) {
|
||||
break
|
||||
}
|
||||
} else if (item[key] === i || ((typeof item[key]) === 'string' && item[key].indexOf(i + '') >= 0)) {
|
||||
found = true
|
||||
break
|
||||
}
|
||||
if (found) {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
allFound = false
|
||||
}
|
||||
} else if (value instanceof Object) {
|
||||
for (const key2 in value) {
|
||||
const v = value[key2]
|
||||
if (v && v !== item[key][key2]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
} else if (item[key] !== value) {
|
||||
allFound = false
|
||||
}
|
||||
}
|
||||
return allFound
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const start = size * (current - 1)
|
||||
let end = size * current
|
||||
if (data.length < end) {
|
||||
end = data.length
|
||||
}
|
||||
const records = data.slice(start, end)
|
||||
const maxPage = data.length % size === 0 ? data.length / size : Math.floor(data.length / size) + 1
|
||||
if (current > maxPage) {
|
||||
current = maxPage
|
||||
}
|
||||
if (current < 1) {
|
||||
current = 1
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: {
|
||||
records: records,
|
||||
total: data.length,
|
||||
size: size,
|
||||
current: current
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/get',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
let id = req.params.id
|
||||
id = parseInt(id)
|
||||
let current = null
|
||||
for (const item of list) {
|
||||
if (item.id === id) {
|
||||
current = item
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: current
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/add',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
req.body.id = ++options.idGenerator
|
||||
list.unshift(req.body)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/update',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
for (const item of list) {
|
||||
if (item.id === req.body.id) {
|
||||
Object.assign(item, req.body)
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/delete',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
delById(req, list)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/batchDelete',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
const ids = req.body.ids
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
const item = list[i]
|
||||
if (ids.indexOf(item.id) >= 0) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { mock } from '@/api/service'
|
||||
import * as tools from '@/api/tools'
|
||||
|
||||
const req = context => context.keys().map(context)
|
||||
|
||||
// 模拟数据
|
||||
const apiList = req(require.context('../', true, /mock\.js$/))
|
||||
.filter(e => e.default)
|
||||
.map(e => e.default)
|
||||
|
||||
apiList.forEach(apiFile => {
|
||||
for (const item of apiFile) {
|
||||
mock
|
||||
.onAny(new RegExp('^/api' + item.path))
|
||||
.reply(config => {
|
||||
console.log('------------fake request start -------------')
|
||||
console.log('request:', config)
|
||||
const data = config.data ? JSON.parse(config.data) : {}
|
||||
const query = config.url.indexOf('?') >= 0 ? config.url.substring(config.url.indexOf('?') + 1) : undefined
|
||||
let params = {}
|
||||
if (query) {
|
||||
const arr = query.split('&')
|
||||
for (const item of arr) {
|
||||
const kv = item.split('=')
|
||||
params[kv[0]] = kv[1]
|
||||
}
|
||||
} else {
|
||||
params = data
|
||||
}
|
||||
const req = {
|
||||
body: data,
|
||||
params: params
|
||||
}
|
||||
const ret = item.handle(req)
|
||||
console.log('response:', ret)
|
||||
console.log('------------fake request end-------------')
|
||||
if (ret.code === 0) {
|
||||
return tools.responseSuccess(ret.data, ret.msg)
|
||||
} else {
|
||||
return tools.responseError(ret.data, ret.msg, ret.code)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,40 +0,0 @@
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
export function BatchDel (ids) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/batchDelete',
|
||||
method: 'post',
|
||||
data: { ids }
|
||||
})
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export const crudOptions = {
|
||||
rowHandle: {
|
||||
// columnHeader: '操作',
|
||||
width: 370,
|
||||
custom: [
|
||||
{
|
||||
text: ' 自定义',
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
emit: 'customHandleBtn',
|
||||
icon: 'el-icon-s-flag'
|
||||
}
|
||||
],
|
||||
fixed: 'right'
|
||||
},
|
||||
pageOptions: {
|
||||
compact: true // 是否紧凑型页面
|
||||
},
|
||||
options: {
|
||||
height: '100%', // 表格高度100%, 使用toolbar必须设置
|
||||
highlightCurrentRow: true,
|
||||
rowKey: 'id',
|
||||
lazy: true,
|
||||
load: (tree, treeNode, resolve) => {
|
||||
requestForMock({
|
||||
url: '/d2crudplus/synthesize/children',
|
||||
method: 'get',
|
||||
data: { id: tree.id }
|
||||
}).then(ret => {
|
||||
console.log('懒加载数据', ret)
|
||||
resolve(ret)
|
||||
})
|
||||
},
|
||||
showSummary: true,
|
||||
summaryMethod (param) {
|
||||
const { columns, data } = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '总价'
|
||||
return
|
||||
}
|
||||
console.log('111', column)
|
||||
if (column.label !== '金额(元)') {
|
||||
return
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]))
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)
|
||||
sums[index] += ' 元'
|
||||
} else {
|
||||
sums[index] = ''
|
||||
}
|
||||
})
|
||||
|
||||
return sums
|
||||
}
|
||||
},
|
||||
indexRow: { // 或者直接传true,不显示title，不居中
|
||||
title: '序号',
|
||||
align: 'center'
|
||||
},
|
||||
selectionRow: {
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
expandRow: { // 或者直接传true,不显示title，不居中
|
||||
title: '展开',
|
||||
align: 'center'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '数据列',
|
||||
key: 'data',
|
||||
sortable: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'time',
|
||||
type: 'datetime',
|
||||
sortable: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'province',
|
||||
sortable: true,
|
||||
search: { key: 'province', disabled: false },
|
||||
type: 'select',
|
||||
form: {
|
||||
component: { props: { filterable: true, multiple: true, clearable: true } }
|
||||
},
|
||||
dict: {
|
||||
data: [
|
||||
{ value: 'sz', label: '深圳' },
|
||||
{ value: 'gz', label: '广州' },
|
||||
{ value: 'wh', label: '武汉' },
|
||||
{ value: 'sh', label: '上海' }
|
||||
]
|
||||
},
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: '金额(元)',
|
||||
key: 'amount',
|
||||
sortable: true,
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default {
|
||||
init: `
|
||||
`,
|
||||
crud: `
|
||||
`,
|
||||
template: `
|
||||
`
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">综合示例
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
@customHandleBtn="customHandleBtnHandle"
|
||||
>
|
||||
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
|
||||
<el-button-group >
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"></i> 新增</el-button>
|
||||
</el-button-group>
|
||||
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
</div>
|
||||
|
||||
<template slot="expandSlot" slot-scope="scope">
|
||||
这里显示行展开数据:{{scope.row.data}}
|
||||
</template>
|
||||
|
||||
<span slot="PaginationPrefixSlot" class="prefix" >
|
||||
<el-button class="square" size="mini" title="批量删除" @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length==0" />
|
||||
</span>
|
||||
|
||||
</d2-crud-x>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AddObj, GetList, UpdateObj, DelObj, BatchDel } from './api'
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import helper from './helper'
|
||||
export default {
|
||||
name: 'formColumn',
|
||||
components: {},
|
||||
mixins: [d2CrudPlus.crud],
|
||||
data () {
|
||||
return {
|
||||
helper: helper,
|
||||
multipleSelection: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted () {
|
||||
// 修复首次加载表尾合计行无法显示的bug
|
||||
setTimeout(() => {
|
||||
this.getD2CrudTable().store.scheduleLayout()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions
|
||||
},
|
||||
pageRequest (query) {
|
||||
return GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return DelObj(row.id).then(ret => {
|
||||
// 手动更新加载项
|
||||
const data = this.getD2Crud().$refs.elTable.store.states.treeData
|
||||
if (data != null) {
|
||||
const item = data[row.parentId]
|
||||
if (item != null) {
|
||||
item.loaded = false
|
||||
item.expanded = false
|
||||
}
|
||||
}
|
||||
return ret
|
||||
})
|
||||
},
|
||||
batchDelRequest (ids) {
|
||||
return BatchDel(ids)
|
||||
},
|
||||
handleCurrentChange (currentRow, oldCurrentRow) {
|
||||
this.$message('单选' + currentRow.data)
|
||||
},
|
||||
customHandleBtnHandle ({ index, row }) {
|
||||
this.$message('自定义操作按钮：' + row.data)
|
||||
},
|
||||
checkSecond () {
|
||||
this.getD2CrudTable().toggleRowSelection(this.getD2CrudTableData()[0]) // 跟下面等效
|
||||
this.getD2Crud().$refs.elTable.toggleRowSelection(this.getD2Crud().d2CrudData[1])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,101 +0,0 @@
|
||||
import mockUtil from '../mock/base'
|
||||
|
||||
const options = {
|
||||
name: 'd2-crud-plus/synthesize',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
data: '我会懒加载',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'wh',
|
||||
amount: 100,
|
||||
hasChildren: true,
|
||||
loaded: false,
|
||||
children: [
|
||||
{
|
||||
data: '懒加载的子数据',
|
||||
province: ['sh', 'gz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
},
|
||||
{
|
||||
data: '懒加载的子数据2',
|
||||
province: ['sh', 'sz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: 'data2',
|
||||
province: 'sh',
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 999,
|
||||
data: 'data1_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: ['gz', 'sz'], // 可以逗号分隔的字符串 'gz,sz'
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 1000,
|
||||
data: 'data1_1_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: ['sz', 'gz'], // 可以逗号分隔的字符串 'gz,sz'
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 888,
|
||||
data: 'data1_2',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'sh',
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 889,
|
||||
data: 'data1_2_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'gz',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: 'data3',
|
||||
province: ['sh', 'gz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
},
|
||||
{
|
||||
data: 'data4',
|
||||
province: ['sh', 'sz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
|
||||
mock.push({
|
||||
path: '/d2crudplus/synthesize/children',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
console.log('req', req)
|
||||
const id = parseInt(req.params.id)
|
||||
const item = mockUtil.findById(id, options.list)
|
||||
console.log('children:', item.children)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: item.children
|
||||
}
|
||||
}
|
||||
})
|
||||
export default mock
|
||||
@@ -1,58 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$refs.d2Crud.d2CrudData)
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2CrudData` 拿到变化后的表格数据。代码如下：
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">基础表格</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.$refs.d2Crud.d2CrudData)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
selection-row
|
||||
@selection-change="handleSelectionChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange (selection) {
|
||||
console.log(selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
`D2 Crud` 组件提供了多选的支持，只需要配置 `selection-row` 属性即可实现多选。之后由 `selection-change` 事件来管理选择项发生变化时触发的事件，它会传入 `selection` 。代码如下：
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">多选</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
selection-row
|
||||
@selection-change="handleSelectionChange">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange (selection) {
|
||||
console.log(selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
options: {
|
||||
defaultSort: {
|
||||
prop: 'date',
|
||||
order: 'descending'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">排序</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
options: {
|
||||
defaultSort: {
|
||||
prop: 'date',
|
||||
order: 'descending'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tag',
|
||||
filters: [
|
||||
{ text: '家', value: '家' },
|
||||
{ text: '公司', value: '公司' }
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterPlacement: 'bottom-end'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
tag: '家'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
tag: '公司'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
tag: '家'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
tag: '公司'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
在 `columns` 中设置 `filters` `filterMethod` 属性即可开启该列的筛选，`filters` 是一个数组， `filterMethod` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。代码如下：
|
||||
@@ -1,86 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">筛选</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tag',
|
||||
filters: [
|
||||
{ text: '家', value: '家' },
|
||||
{ text: '公司', value: '公司' }
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.tag === value
|
||||
},
|
||||
filterPlacement: 'bottom-end'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
tag: '家'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
tag: '公司'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
tag: '家'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
tag: '公司'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,105 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
showSummary: true,
|
||||
summaryMethod (param) {
|
||||
const { columns, data } = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '总价'
|
||||
return
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]))
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)
|
||||
sums[index] += ' 元'
|
||||
} else {
|
||||
sums[index] = 'N/A'
|
||||
}
|
||||
})
|
||||
|
||||
return sums
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
将 `options` 中的 `showSummary` 设置为 `true` 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 `sumText` 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 `summaryMethod` 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。代码如下：
|
||||
@@ -1,123 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表尾合计行</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
showSummary: true,
|
||||
summaryMethod (param) {
|
||||
const { columns, data } = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '总价'
|
||||
return
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]))
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)
|
||||
sums[index] += ' 元'
|
||||
} else {
|
||||
sums[index] = 'N/A'
|
||||
}
|
||||
})
|
||||
|
||||
return sums
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,88 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
border: true,
|
||||
spanMethod ({ row, column, rowIndex, columnIndex }) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 2]
|
||||
} else if (columnIndex === 1) {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 `rowspan` ，第二个元素代表 `colspan` 。代码如下：
|
||||
@@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">合并行</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
border: true,
|
||||
spanMethod ({ row, column, rowIndex, columnIndex }) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 2]
|
||||
} else if (columnIndex === 1) {
|
||||
return [0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,94 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
border: true,
|
||||
spanMethod ({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `options` 传入 `spanMethod` 方法可以实现合并行，方法的参数是一个对象，里面包含当前行 `row` 、当前列 `column` 、当前行号 `rowIndex` 、当前列号 `columnIndex` 四个属性。该函数可以返回一个键名为 `rowspan` 和 `colspan` 的对象。代码如下：
|
||||
@@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">合并列</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '数值 1',
|
||||
key: 'amount1'
|
||||
},
|
||||
{
|
||||
title: '数值 2',
|
||||
key: 'amount2'
|
||||
},
|
||||
{
|
||||
title: '数值 3',
|
||||
key: 'amount3'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: '12987122',
|
||||
name: '王小虎',
|
||||
amount1: '234',
|
||||
amount2: '3.2',
|
||||
amount3: 10
|
||||
},
|
||||
{
|
||||
id: '12987123',
|
||||
name: '王小虎',
|
||||
amount1: '165',
|
||||
amount2: '4.43',
|
||||
amount3: 12
|
||||
},
|
||||
{
|
||||
id: '12987124',
|
||||
name: '王小虎',
|
||||
amount1: '324',
|
||||
amount2: '1.9',
|
||||
amount3: 9
|
||||
},
|
||||
{
|
||||
id: '12987125',
|
||||
name: '王小虎',
|
||||
amount1: '621',
|
||||
amount2: '2.2',
|
||||
amount3: 17
|
||||
},
|
||||
{
|
||||
id: '12987126',
|
||||
name: '王小虎',
|
||||
amount1: '539',
|
||||
amount2: '4.1',
|
||||
amount3: 15
|
||||
}
|
||||
],
|
||||
options: {
|
||||
border: true,
|
||||
spanMethod ({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
rowspan: 2,
|
||||
colspan: 1
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
rowspan: 0,
|
||||
colspan: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,138 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
add-title="我的新增"
|
||||
:add-template="addTemplate"
|
||||
:form-options="formOptions"
|
||||
@dialog-open="handleDialogOpen"
|
||||
@row-add="handleRowAdd"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
|
||||
</d2-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
addTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '2016-05-05'
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '王小虎'
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '上海市普陀区金沙江路 1520 弄'
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogOpen ({ mode }) {
|
||||
this.$message({
|
||||
message: '打开模态框，模式为：' + mode,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
// 普通的新增
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
// 传入自定义模板的新增
|
||||
addRowWithNewTemplate () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add',
|
||||
template: {
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
value1: {
|
||||
title: '新属性1',
|
||||
value: ''
|
||||
},
|
||||
value2: {
|
||||
title: '新属性2',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRowAdd (row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
// done可以传入一个对象来修改提交的某个字段
|
||||
done({
|
||||
address: '我是通过done事件传入的数据！'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消保存',
|
||||
type: 'warning'
|
||||
});
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，定义 `add-title` 来修改新增模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
|
||||
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">新增数据</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
add-title="我的新增"
|
||||
:add-template="addTemplate"
|
||||
:form-options="formOptions"
|
||||
@dialog-open="handleDialogOpen"
|
||||
@row-add="handleRowAdd"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
addTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '2016-05-05'
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '王小虎'
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '上海市普陀区金沙江路 1520 弄'
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogOpen ({ mode }) {
|
||||
this.$message({
|
||||
message: '打开模态框，模式为：' + mode,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
addRowWithNewTemplate () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add',
|
||||
template: {
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
value1: {
|
||||
title: '新属性1',
|
||||
value: ''
|
||||
},
|
||||
value2: {
|
||||
title: '新属性2',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRowAdd (row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
done({
|
||||
address: '我是通过done事件传入的数据！'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消保存',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,171 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
edit-title="我的修改"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@dialog-open="handleDialogOpen"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
|
||||
</d2-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidEdit: true,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
columnHeader: '编辑表格',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我进行编辑',
|
||||
size: 'small',
|
||||
show (index, row) {
|
||||
if (row.showEditButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidEdit) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
},
|
||||
forbidEdit: {
|
||||
title: '禁用按钮',
|
||||
value: false,
|
||||
component: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
showEditButton: {
|
||||
title: '显示按钮',
|
||||
value: true,
|
||||
component: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogOpen ({ mode, row }) {
|
||||
this.$message({
|
||||
message: '打开模态框，模式为：' + mode,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
editRowWithNewTemplate () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: "edit",
|
||||
rowIndex: 2,
|
||||
template: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
// done可以传入一个对象来修改提交的某个字段
|
||||
done({
|
||||
address: '我是通过done事件传入的数据！'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `template`对象，可使用自定义模板编辑指定行，定义 `edit-title` 来修改编辑模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
|
||||
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">修改数据</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
edit-title="我的修改"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@dialog-open="handleDialogOpen"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidEdit: true,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidEdit: false,
|
||||
showEditButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
columnHeader: '编辑表格',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我进行编辑',
|
||||
size: 'small',
|
||||
show (index, row) {
|
||||
if (row.showEditButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidEdit) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
},
|
||||
forbidEdit: {
|
||||
title: '禁用按钮',
|
||||
value: false,
|
||||
component: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
showEditButton: {
|
||||
title: '显示按钮',
|
||||
value: true,
|
||||
component: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDialogOpen ({ mode, row }) {
|
||||
this.$message({
|
||||
message: '打开模态框，模式为：' + mode,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
editRowWithNewTemplate () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'edit',
|
||||
rowIndex: 2,
|
||||
template: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done({
|
||||
address: '我是通过done事件传入的数据！'
|
||||
})
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,95 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
@row-remove="handleRowRemove"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidRemove: true,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
remove: {
|
||||
icon: 'el-icon-delete',
|
||||
size: 'small',
|
||||
fixed: 'right',
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidRemove) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowRemove ({ index, row }, done) {
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `remove` 对象可以开启删除模式，`confirm` 属性的值为 `Boolean` 类型，控制删除前是否弹出confirm框进行提示， `row-remove` 事件控制数据删除，参数： `index` 是当前删除行的索引， `row` 是当前删除行的数据， `done` 用于控制删除成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">删除数据</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
@row-remove="handleRowRemove">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
forbidRemove: true,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
forbidRemove: false,
|
||||
showRemoveButton: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
remove: {
|
||||
icon: 'el-icon-delete',
|
||||
size: 'small',
|
||||
fixed: 'right',
|
||||
confirm: true,
|
||||
show (index, row) {
|
||||
if (row.showRemoveButton) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
disabled (index, row) {
|
||||
if (row.forbidRemove) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowRemove ({ index, row }, done) {
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
@custom-emit-1="handleCustomEvent"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
custom: [
|
||||
{
|
||||
text: '自定义按钮',
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
emit: 'custom-emit-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCustomEvent ({index, row}) {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `custom` 数组对象可以自定义模式，数组中每一个对象定义一个自定义按钮，对象属性支持所有的 `el-button` 属性， `emit` 属性定义了监听的事件，例如 `emit` 的值为 `custom-emit-1`，就在 `D2 Crud` 中监听 `custom-emit-1` 事件 监听的事件参数： `index` 是当前行的索引， `row` 是当前行的数据。代码如下：
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">自定义操作列</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
@custom-emit-1="handleCustomEvent">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
custom: [
|
||||
{
|
||||
text: '自定义按钮',
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
emit: 'custom-emit-1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCustomEvent ({ index, row }) {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
options: {
|
||||
stripe: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">带斑马纹表格</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:options="options"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
options: {
|
||||
stripe: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,132 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我查看表单组件渲染',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-date-picker',
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: [
|
||||
{
|
||||
value: '王小虎',
|
||||
label: '王小虎'
|
||||
},
|
||||
{
|
||||
value: '王中虎',
|
||||
label: '王中虎'
|
||||
},
|
||||
{
|
||||
value: '王老虎',
|
||||
label: '王老虎'
|
||||
}
|
||||
],
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '',
|
||||
component: {
|
||||
span: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false,
|
||||
gutter: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
向 `add-template` 或 `edit-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
|
||||
@@ -1,150 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表单组件渲染</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我查看表单组件渲染',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-date-picker',
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: [
|
||||
{
|
||||
value: '王小虎',
|
||||
label: '王小虎'
|
||||
},
|
||||
{
|
||||
value: '王中虎',
|
||||
label: '王中虎'
|
||||
},
|
||||
{
|
||||
value: '王老虎',
|
||||
label: '王老虎'
|
||||
}
|
||||
],
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '',
|
||||
component: {
|
||||
span: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false,
|
||||
gutter: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,116 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我查看表单布局',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '',
|
||||
component: {
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '',
|
||||
component: {
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '',
|
||||
component: {
|
||||
span: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false,
|
||||
gutter: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `add-template` 或 `edit-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：
|
||||
@@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表单布局</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
:form-options="formOptions"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我查看表单布局',
|
||||
size: 'small',
|
||||
fixed: 'right'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: '',
|
||||
component: {
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: '',
|
||||
component: {
|
||||
span: 12
|
||||
}
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: '',
|
||||
component: {
|
||||
span: 18
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false,
|
||||
gutter: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,115 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:add-template="addTemplate"
|
||||
:form-options="formOptions"
|
||||
:add-rules="addRules"
|
||||
@row-add="handleRowAdd"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
</d2-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
addButton: {
|
||||
text: '点我查看表单校验',
|
||||
icon: 'el-icon-plus',
|
||||
size: 'small'
|
||||
},
|
||||
addTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
},
|
||||
addRules: {
|
||||
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
|
||||
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
|
||||
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
handleRowAdd (row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300);
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消保存',
|
||||
type: 'warning'
|
||||
});
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
通过给 `D2 Crud` 传入 `add-rules` 或 `edit-rules` 可开启新增/修改表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：
|
||||
@@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表单校验</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:add-template="addTemplate"
|
||||
:form-options="formOptions"
|
||||
:add-rules="addRules"
|
||||
@row-add="handleRowAdd"
|
||||
@dialog-cancel="handleDialogCancel">
|
||||
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
addButton: {
|
||||
text: '点我查看表单校验',
|
||||
icon: 'el-icon-plus',
|
||||
size: 'small'
|
||||
},
|
||||
addTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
},
|
||||
addRules: {
|
||||
date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
|
||||
name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
|
||||
address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addRow () {
|
||||
this.$refs.d2Crud.showDialog({
|
||||
mode: 'add'
|
||||
})
|
||||
},
|
||||
handleRowAdd (row, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消保存',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,87 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@cell-data-change="handleCellDataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
component: {
|
||||
name: 'el-date-picker',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: [
|
||||
{
|
||||
value: '王小虎',
|
||||
label: '王小虎'
|
||||
},
|
||||
{
|
||||
value: '王中虎',
|
||||
label: '王中虎'
|
||||
},
|
||||
{
|
||||
value: '王老虎',
|
||||
label: '王老虎'
|
||||
}
|
||||
],
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCellDataChange ({ rowIndex, key, value, row }) {
|
||||
console.log(rowIndex)
|
||||
console.log(key)
|
||||
console.log(value)
|
||||
console.log(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
向 `columns` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收两个参数： `h`是render函数的固定参数， `scope` 是单元格中的数据，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。通过 `cell-data-change`事件可以监听单元格内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 `{rowIndex, key, value, row}`， `rowIndex` 为改变所在行，`key` 为改变的字段，`value` 为改变后的值，`row` 是改变所在行的所有数据。代码如下：
|
||||
@@ -1,104 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表格内编辑</template>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@cell-data-change="handleCellDataChange"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
component: {
|
||||
name: 'el-date-picker',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
component: {
|
||||
name: 'el-select',
|
||||
options: [
|
||||
{
|
||||
value: '王小虎',
|
||||
label: '王小虎'
|
||||
},
|
||||
{
|
||||
value: '王中虎',
|
||||
label: '王中虎'
|
||||
},
|
||||
{
|
||||
value: '王老虎',
|
||||
label: '王老虎'
|
||||
}
|
||||
],
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
component: {
|
||||
name: 'el-input',
|
||||
size: 'small'
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCellDataChange ({ rowIndex, key, value, row }) {
|
||||
console.log(rowIndex)
|
||||
console.log(key)
|
||||
console.log(value)
|
||||
console.log(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,62 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data">
|
||||
<el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
|
||||
<template slot="prepend">Http://</template>
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
|
||||
<el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
|
||||
</d2-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
`header` slot 可以在表头添加自定义内容。代码如下：
|
||||
@@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表格slot</template>
|
||||
<d2-crud ref="d2Crud" :columns="columns" :data="data">
|
||||
<el-input slot="header" placeholder="请输入内容" style="margin-bottom: 5px">
|
||||
<template slot="prepend">Http://</template>
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
<el-button slot="header" style="margin-bottom: 5px">自定义按钮1</el-button>
|
||||
<el-button slot="header" type="primary" round style="margin-bottom: 5px">自定义按钮2</el-button>
|
||||
</d2-crud>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
scope: {
|
||||
default: null
|
||||
},
|
||||
myProps: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
if (this.scope.$index === 1) {
|
||||
return this.myProps
|
||||
} else if (this.scope.$index === 3) {
|
||||
return '通过scope拿到了当前行日期：' + this.scope.row.date
|
||||
}
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.scope)
|
||||
console.log(this.myProps)
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,46 +0,0 @@
|
||||
export default `<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
// 本行的所有数据，此字段不需要额外配置
|
||||
scope: {
|
||||
default: null
|
||||
},
|
||||
// 通过 component 中 props 字段传过来的数据，此字段需要先在 component 中配置
|
||||
myProps: {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
if (this.scope.$index === 1) {
|
||||
return this.myProps
|
||||
} else if (this.scope.$index === 3) {
|
||||
return '通过scope拿到了当前行日期：' + this.scope.row.date
|
||||
}
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.scope)
|
||||
console.log(this.myProps)
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1,75 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: 'my-tag',
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1,80 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag,
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，可以在 `component` 中传入 `props` 字段，传入的字段可以在自定义组件中通过 `props` 接收，自定义组件还可以通过在 `props` 中定义 `scope` 字段来拿到当前行的所有数据，代码如下：
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表格自定义组件</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
@d2-data-change="handleDataChange"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>全局注册写法：</h4>
|
||||
<d2-highlight :code="codeOverall"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>局部注册写法：</h4>
|
||||
<d2-highlight :code="codePart"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>自定义组件 MyTag 代码：</h4>
|
||||
<d2-highlight :code="codeComponent"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import codeOverall from './codeOverall.js'
|
||||
import codePart from './codePart.js'
|
||||
import codeComponent from './codeComponent.js'
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
codeOverall,
|
||||
codePart,
|
||||
codeComponent,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag,
|
||||
props: {
|
||||
myProps: '我是通过props传过来的数据！'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,29 +0,0 @@
|
||||
export default `<template>
|
||||
<div style="cursor: pointer">
|
||||
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
type () {
|
||||
return this.value ? 'success' : 'danger'
|
||||
},
|
||||
text () {
|
||||
return this.value ? '是' : '否'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('input', !this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1,130 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
@d2-data-change="handleDataChange"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: 'my-tag'
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
columnHeader: '编辑表格',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我编辑自定义表单组件',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
},
|
||||
check: {
|
||||
title: '检查状态（点击进行修改）',
|
||||
value: false,
|
||||
component: {
|
||||
name: 'my-tag'
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
},
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1,135 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
@d2-data-change="handleDataChange"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
columnHeader: '编辑表格',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我编辑自定义表单组件',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
},
|
||||
check: {
|
||||
title: '检查状态（点击进行修改）',
|
||||
value: false,
|
||||
component: {
|
||||
name: MyTag
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
},
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
向 `addTemplate` 或 `editTemplate` 中需要渲染自定义组件的 `component` 对象 `name` 中传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：
|
||||
@@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">表单自定义组件</template>
|
||||
<d2-crud
|
||||
ref="d2Crud"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:rowHandle="rowHandle"
|
||||
:edit-template="editTemplate"
|
||||
@d2-data-change="handleDataChange"
|
||||
@row-edit="handleRowEdit"
|
||||
@dialog-cancel="handleDialogCancel"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>全局注册写法：</h4>
|
||||
<d2-highlight :code="codeOverall"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>局部注册写法：</h4>
|
||||
<d2-highlight :code="codePart"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<h4>自定义组件 MyTag 代码：</h4>
|
||||
<d2-highlight :code="codeComponent"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import codeOverall from './codeOverall.js'
|
||||
import codePart from './codePart.js'
|
||||
import codeComponent from './codeComponent.js'
|
||||
import MyTag from './MyTag'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyTag
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
codeOverall,
|
||||
codePart,
|
||||
codeComponent,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: '180'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '检查状态（点击可修改）',
|
||||
key: 'check',
|
||||
component: {
|
||||
name: MyTag
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄',
|
||||
check: false
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄',
|
||||
check: true
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄',
|
||||
check: true
|
||||
}
|
||||
],
|
||||
rowHandle: {
|
||||
columnHeader: '编辑表格',
|
||||
edit: {
|
||||
icon: 'el-icon-edit',
|
||||
text: '点我编辑自定义表单组件',
|
||||
size: 'small'
|
||||
}
|
||||
},
|
||||
editTemplate: {
|
||||
date: {
|
||||
title: '日期',
|
||||
value: ''
|
||||
},
|
||||
name: {
|
||||
title: '姓名',
|
||||
value: ''
|
||||
},
|
||||
address: {
|
||||
title: '地址',
|
||||
value: ''
|
||||
},
|
||||
check: {
|
||||
title: '检查状态（点击进行修改）',
|
||||
value: false,
|
||||
component: {
|
||||
name: MyTag
|
||||
}
|
||||
}
|
||||
},
|
||||
formOptions: {
|
||||
labelWidth: '80px',
|
||||
labelPosition: 'left',
|
||||
saveLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleDataChange (data) {
|
||||
console.log(data)
|
||||
},
|
||||
handleRowEdit ({ index, row }, done) {
|
||||
this.formOptions.saveLoading = true
|
||||
setTimeout(() => {
|
||||
console.log(index)
|
||||
console.log(row)
|
||||
this.$message({
|
||||
message: '编辑成功',
|
||||
type: 'success'
|
||||
})
|
||||
done()
|
||||
this.formOptions.saveLoading = false
|
||||
}, 300)
|
||||
},
|
||||
handleDialogCancel (done) {
|
||||
this.$message({
|
||||
message: '取消编辑',
|
||||
type: 'warning'
|
||||
})
|
||||
done()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,54 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:loading="loading"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
loading: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
在 `D2 Crud` 组件中传入 `loading` ，即可控制表格加载状态，`loading` 的可选值为 `true` 和 `false`。代码如下：
|
||||
@@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">加载状态</template>
|
||||
<el-button @click="handleLoading">点我切换加载状态</el-button>
|
||||
<d2-crud
|
||||
style="margin-top: 10px"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:loading="loading"/>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-markdown :source="doc"/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="d2-mb">
|
||||
<d2-highlight :code="code"/>
|
||||
</el-card>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="文档"
|
||||
link="https://d2.pub/zh/doc/d2-crud-v2"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../install'
|
||||
import doc from './doc.md'
|
||||
import code from './code.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
doc,
|
||||
code,
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLoading () {
|
||||
this.loading = !this.loading
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,60 +0,0 @@
|
||||
export default `<template>
|
||||
<div>
|
||||
<d2-crud
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:loading="loading"
|
||||
:loading-options="loadingOptions"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}
|
||||
],
|
||||
loading: true,
|
||||
loadingOptions: {
|
||||
text: '拼命加载中',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>`
|
||||
@@ -1 +0,0 @@
|
||||
在 `D2 Crud` 组件中传入 `loading-options` ，即可自定义表格加载状态。代码如下：
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user