0e61d7cee9
Former-commit-id: 61b3ce81f703f3b83d29c7ec9f1f58ac351e9feb [formerly 85631772690b91e0d39e1b9e90d23dae7d929c9a] [formerly 61b3ce81f703f3b83d29c7ec9f1f58ac351e9feb [formerly 85631772690b91e0d39e1b9e90d23dae7d929c9a] [formerly 61b3ce81f703f3b83d29c7ec9f1f58ac351e9feb [formerly 85631772690b91e0d39e1b9e90d23dae7d929c9a] [formerly 85631772690b91e0d39e1b9e90d23dae7d929c9a [formerly 8194f7e92144427b7c4947a93812a1cd0564a642 [formerly f4b7b47afbed6f98890de3ee269cbeae522f819e]]]]] Former-commit-id: ea4bebdc76ac4332d037f141867abe2d88211643 Former-commit-id: 2be71d915c7aca35f87f3cd91b313a4e1d92fdc5 Former-commit-id: cf55d88b39e1f3293deada0f7294e9938a15667b [formerly 19d9709c2a3c71a1a4cf268f80ebcaff05a6c97d] Former-commit-id: e8c7b6443a38f5d4311d19a8ecf9d5a65a5e3cd2 Former-commit-id: c68ed1fe39857770bef0feb198d6c8ab55a97959 Former-commit-id: cad71a8eb5306a6303be52cd6eed4021c16c93b6 Former-commit-id: 22d6241afd1762a0f999c89dcb24052504660e82 Former-commit-id: 3a183f17d724638f25c5f5ea70a368cdc3cd4f85
105 lines
2.4 KiB
Vue
105 lines
2.4 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 {
|
||
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
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
handleDataChange (data) {
|
||
console.log(data)
|
||
}
|
||
}
|
||
}
|
||
</script>
|