50ee49c0e6
Former-commit-id: fd7b584b4526066252df9daf32a500a751f8e1cc [formerly fd7b584b4526066252df9daf32a500a751f8e1cc [formerly fd7b584b4526066252df9daf32a500a751f8e1cc [formerly fd7b584b4526066252df9daf32a500a751f8e1cc [formerly 2d919e5b4a5ab1b9520acdad3bede685eb39a048 [formerly b271fe86016ec9ba1d49273e2d09f496c7724b37]]]]] Former-commit-id: 40cbe50635239f06895ed7238b3be5768e5b278c Former-commit-id: d246483eb0cf4b5953a7bf414a0e7b6da0eac0a6 Former-commit-id: e3b6c509d0ca50f9582224f1931b2181c91cb694 [formerly 72036ea4b1482806b03952317638b398ecc91e30] Former-commit-id: 8f6faabb2eb3df935874ee610ce5406a688e7ce9 Former-commit-id: 4352ef829764b5d2d5e8ff1cd8f249b58d590672 Former-commit-id: 39406312f2c114c8d0d6e20169db4255c0a0bb86 Former-commit-id: 7eb137b078ec95d4e335faae94b783923b5b6499 Former-commit-id: b65fda7c55cf7fd647e1e5907f3000b74387b9e6
106 lines
2.4 KiB
Vue
106 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 {
|
||
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
|
||
}
|
||
}
|
||
],
|
||
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>
|