b0240d36a6
Former-commit-id: edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly ea643b9406f1edfb699e8ea4d3cec1d4de963172 [formerly 7313e2789230e920c4842b112bb531e2e08af6e2]]]]] Former-commit-id: 3379376f08f0541791cf2e8cf68dd852a1485b0b Former-commit-id: 2d4545644d977c8e518cc18ba4a5dc9ac6a98d81 Former-commit-id: 5db5367172b07787b067ba45ffe4d9e6b2bf9a9e [formerly 6581dbb6e8b1269aecadbc003ab54db112730de5] Former-commit-id: d5ac5d687634f6095254a15c29d4f213dcd09ed1 Former-commit-id: db16049ca534a57db01116e51c288a66b38872d2 Former-commit-id: 62918ec08f888275e07636eb6479cb358a260e47 Former-commit-id: 268a7c555d680386d179ad88ba76d7ea2499515d Former-commit-id: 775c28900bae4adebcf8e376b19c9fbf099cc042
109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
||
<d2-container :filename="filename">
|
||
<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>
|
||
<template slot="footer">
|
||
<d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
|
||
</template>
|
||
</d2-container>
|
||
</template>
|
||
|
||
<script>
|
||
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 {
|
||
filename: __filename,
|
||
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>
|