85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
|
<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>
|
||
|
|
<template slot="footer">
|
||
|
|
<d2-link-btn title="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
|
||
|
|
</template>
|
||
|
|
</d2-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
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>
|