sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

d2-crud 排序

Browse Source 
Former-commit-id: 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 2bff4175f7d9bec767f83860b0a868dd0b969655 [formerly 9b7db1eaf47b53d5d150c8b970f4261ce2b854f2 [formerly 8e3ae366af52dca71d47b67a90cea85d4f079abb]]]]]
Former-commit-id: e8bde0b03148cf36c4ffc42a2b9338592e0b6727
Former-commit-id: 0628fba756e58527c744875739f23b3b7dbc619d
Former-commit-id: fac0d9372ad2b3a5594f1b0f1c682ccd06f32126 [formerly 5f19470d4120bdd71c5b25e7d53a3e7b33744d6b]
Former-commit-id: 6eef9e1ae4e5e6e0ce7f930812cca36d41cccccd
Former-commit-id: b259cf2b350098d6835ff618647d8794bd9103c3
Former-commit-id: 15c6f7d99028900a35107c3f23e25596f3b6ea3e
Former-commit-id: 40345d53ad2ae7c7d262263042a18808bec4bd53
Former-commit-id: 476518968208bc43f753ab6acf2394609b5f2b43
This commit is contained in:
孙昊翔
2018-08-28 09:41:12 +08:00
parent 0030e87504
commit cf85416cce
5 changed files with 150 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/menu/modules/demo-d2-crud.js
View File

@@ -13,6 +13,7 @@ export default {
{ path: `${pre}demo7`, title: '流体高度' }, { path: `${pre}demo7`, title: '流体高度' },
{ path: `${pre}demo8`, title: '多级表头' }, { path: `${pre}demo8`, title: '多级表头' },
{ path: `${pre}demo9`, title: '单选' }, { path: `${pre}demo9`, title: '单选' },
{ path: `${pre}demo10`, title: '多选' } { path: `${pre}demo10`, title: '多选' },
{ path: `${pre}demo11`, title: '排序' }
])('/demo/d2-crud/') ])('/demo/d2-crud/')
} }

60
src/pages/demo/d2-crud/demo11/code.js Normal file
View File

@@ -0,0 +1,60 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:options="options"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
sortable: true
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
defaultSort: {
prop: 'date',
order: 'descending'
}
}
}
}
}
</script>`

1
src/pages/demo/d2-crud/demo11/doc.md Normal file
View File

@@ -0,0 +1 @@
在 `columns` 中设置 `sortable` 属性为 `true` ，即可实现以该列为基准的排序。可以通过 `options` 的 `defaultSort` 属性设置默认的排序列和排序顺序。代码如下：

86
src/pages/demo/d2-crud/demo11/index.vue Normal file
View File

@@ -0,0 +1,86 @@
<template>
<d2-container>
<template slot="header">排序</template>
<d2-crud
:columns="columns"
:data="data"
:options="options">
</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',
sortable: true
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: {
defaultSort: {
prop: 'date',
order: 'descending'
}
}
}
}
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
2f4b1ce7274521abba33ad6509f239a4fc7ede76 f97628e615568020c3de348bdc064cb2a7dc3061