e22dce64d4
Former-commit-id: eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly eb890f1e76db02d8b8613650a4620e0815a2adaa [formerly 6c3a4338de7e3fd586a512bc3ed01607a6d35059 [formerly 82b81ed3a29d38520c9604670dc7215f1d5b5174]]]]] Former-commit-id: 4ea2f665b597d7be5475fcc52f72d5480b861f96 Former-commit-id: 6f021dbf6acf5a37c75de9136f988bc3a145478d Former-commit-id: 73529e2785ecda05d6975294c252f1491484f8fd [formerly bec7cf3aef63adf5fb24202468f6e860d91c2eea] Former-commit-id: f3300f293d8c3179a3261dc198f1ac84bacfcd82 Former-commit-id: 12bb9bc4d7512f3a5b58c8c94148b514b54885e9 Former-commit-id: 23a27dc9331d432f00f415b1fde86f80a11c60a4 Former-commit-id: 3ce60f0a0c26979cefb334119093c0d984c2459d Former-commit-id: feb82325b2b2fd15d9a0ba9df800b800bb3da0b2
105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<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>
|
||
<template slot="footer">
|
||
<d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/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>
|