Skip to content

Commit 794af75

Browse files
xrr2016levy9527
xrr2016
authored and
levy9527
committed
feat: 新增卡片样式
1 parent 974a3c8 commit 794af75

File tree

3 files changed

+180
-104
lines changed

3 files changed

+180
-104
lines changed

‎docs/has-title.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
有标题的用法
2+
3+
```vue
4+
<template>
5+
<el-data-tree v-bind="$data" :url="getUrl" :onNew="onNew" :onEdit="onEdit" :onDelete="onDelete" />
6+
</template>
7+
8+
<script>
9+
export default {
10+
data() {
11+
return {
12+
dataPath: 'data.payload',
13+
hasTitle: true,
14+
title: "这是一个标题",
15+
form: [
16+
{
17+
$id: 'name',
18+
$type: 'input',
19+
label: '名字',
20+
$el: {
21+
placeholder: '请输入'
22+
}
23+
}
24+
]
25+
}
26+
},
27+
methods: {
28+
onNew(data) {
29+
return this.$axios.post(this.postUrl, data)
30+
},
31+
onEdit(data) {
32+
return this.$axios.put(this.editUrl, data)
33+
},
34+
onDelete(data) {
35+
return this.$axios.delete(this.deleteUrl, data)
36+
}
37+
}
38+
}
39+
</script>
40+
```

‎src/el-data-tree.vue‎

Lines changed: 139 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,88 @@
11
<template>
2-
<div class="el-data-tree">
2+
<div class="el-data-tree" :class="{'has-border': hasBorder }">
33
<slot name="title" v-if="hasTitle">
4-
<p class="data-tree-title">{{ title }}<i class="el-icon-plus" @click="onDefaultNew"></i></p>
4+
<p class="data-tree-title">
5+
{{ title }}
6+
<i class="el-icon-plus" @click="onDefaultNew"></i>
7+
</p>
58
</slot>
69

7-
<el-input
8-
placeholder="查询"
9-
v-if="showFilter"
10-
v-model="filterText"
11-
suffix-icon="el-icon-search"
12-
clearable
13-
>
14-
</el-input>
15-
<el-tree
16-
ref="tree"
17-
v-loading="loading"
18-
:data="treeData"
19-
v-bind="treeAttributes"
20-
:filterNodeMethod="filterNode"
21-
:defaultExpandedKeys="expandedKeys"
22-
v-on="$listeners"
23-
@node-expand="handleNodeExpand"
24-
@node-collapse="handleNodeCollapse"
25-
@check-change="handleCheckChange"
26-
class="data-tree"
27-
>
28-
<span
29-
class="custom-tree-node"
30-
slot-scope="{node, data}"
10+
<section class="body">
11+
<el-input
12+
placeholder="查询"
13+
v-if="showFilter"
14+
v-model="filterText"
15+
suffix-icon="el-icon-search"
16+
clearable
17+
></el-input>
18+
<el-tree
19+
ref="tree"
20+
v-loading="loading"
21+
:data="treeData"
22+
v-bind="treeAttributes"
23+
:filterNodeMethod="filterNode"
24+
:defaultExpandedKeys="expandedKeys"
25+
v-on="$listeners"
26+
@node-expand="handleNodeExpand"
27+
@node-collapse="handleNodeCollapse"
28+
@check-change="handleCheckChange"
29+
class="data-tree"
3130
>
32-
<span class="custom-tree-node-label">
33-
<!-- @slot 可定制的节点标签内容, 参数为 { data } -->
34-
<slot name="node-label" :data="data">
35-
{{ node.label }}
36-
</slot>
37-
</span>
38-
<span @click="e => e.stopPropagation()" v-if="hasOperation">
39-
<template v-if="extraButtonsType === 'text'">
40-
<el-button v-if="hasNew" type="text" @click="handleCommand('new', node, data)">
41-
{{ newText }}
42-
</el-button>
43-
<el-button v-if="hasEdit" type="text" @click="handleCommand('edit', node, data)">
44-
{{ editText }}
45-
</el-button>
46-
<el-button
47-
v-for="(btn, i) in extraButtons.filter(btn => !btn.show || btn.show(data, node))"
48-
:key="i"
49-
v-bind="btn"
50-
type="text"
51-
@click="handleCommand(btn.text, node, data)"
52-
>
53-
{{ btn.text }}
54-
</el-button>
55-
<el-button v-if="hasDelete" type="text" @click="handleCommand('delete', node, data)" class="delete-button">
56-
{{ deleteText }}
57-
</el-button>
58-
</template>
59-
<el-dropdown
60-
v-else
61-
trigger="click"
62-
@command="command => handleCommand(command, data, node)"
63-
>
64-
<span class="el-dropdown-link"><i class="el-icon-more"></i></span>
65-
<el-dropdown-menu slot="dropdown">
66-
<el-dropdown-item v-if="hasNew" command="new">{{ newText }}</el-dropdown-item>
67-
<el-dropdown-item v-if="hasEdit" command="edit">{{ editText }}</el-dropdown-item>
68-
<el-dropdown-item
31+
<span class="custom-tree-node" slot-scope="{node, data}">
32+
<span class="custom-tree-node-label">
33+
<!-- @slot 可定制的节点标签内容, 参数为 { data } -->
34+
<slot name="node-label" :data="data">{{ node.label }}</slot>
35+
</span>
36+
<span @click="e => e.stopPropagation()" v-if="hasOperation">
37+
<template v-if="extraButtonsType === 'text'">
38+
<el-button
39+
v-if="hasNew"
40+
type="text"
41+
@click="handleCommand('new', node, data)"
42+
>{{ newText }}</el-button>
43+
<el-button
44+
v-if="hasEdit"
45+
type="text"
46+
@click="handleCommand('edit', node, data)"
47+
>{{ editText }}</el-button>
48+
<el-button
6949
v-for="(btn, i) in extraButtons.filter(btn => !btn.show || btn.show(data, node))"
7050
:key="i"
7151
v-bind="btn"
72-
:command="btn.text"
73-
>
74-
{{ btn.text }}
75-
</el-dropdown-item>
76-
<el-dropdown-item v-if="hasDelete" command="delete">{{ deleteText }}</el-dropdown-item>
77-
</el-dropdown-menu>
78-
</el-dropdown>
52+
type="text"
53+
@click="handleCommand(btn.text, node, data)"
54+
>{{ btn.text }}</el-button>
55+
<el-button
56+
v-if="hasDelete"
57+
type="text"
58+
@click="handleCommand('delete', node, data)"
59+
class="delete-button"
60+
>{{ deleteText }}</el-button>
61+
</template>
62+
<el-dropdown
63+
v-else
64+
trigger="click"
65+
@command="command => handleCommand(command, data, node)"
66+
>
67+
<span class="el-dropdown-link">
68+
<i class="el-icon-more"></i>
69+
</span>
70+
<el-dropdown-menu slot="dropdown">
71+
<el-dropdown-item v-if="hasNew" command="new">{{ newText }}</el-dropdown-item>
72+
<el-dropdown-item v-if="hasEdit" command="edit">{{ editText }}</el-dropdown-item>
73+
<el-dropdown-item
74+
v-for="(btn, i) in extraButtons.filter(btn => !btn.show || btn.show(data, node))"
75+
:key="i"
76+
v-bind="btn"
77+
:command="btn.text"
78+
>{{ btn.text }}</el-dropdown-item>
79+
<el-dropdown-item v-if="hasDelete" command="delete">{{ deleteText }}</el-dropdown-item>
80+
</el-dropdown-menu>
81+
</el-dropdown>
82+
</span>
7983
</span>
80-
</span>
81-
</el-tree>
84+
</el-tree>
85+
</section>
8286

8387
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="closeDialog">
8488
<!--https://github.com/FEMessage/el-form-renderer-->
@@ -124,6 +128,13 @@ export default {
124128
type: String,
125129
default: ''
126130
},
131+
/**
132+
* 是否有边框
133+
*/
134+
hasBorder: {
135+
type: Boolean,
136+
default: true
137+
},
127138
/**
128139
* tree attributes
129140
*/
@@ -630,41 +641,65 @@ export default {
630641
</script>
631642

632643
<style lang="stylus">
633-
$delete-color=#E24156;
634-
635-
.el-data-tree {
636-
.data-tree-title {
637-
padding: 8px;
638-
font-weight: bold;
639-
display: flex;
640-
align-items: center;
641-
justify-content: space-between;
642-
643-
.el-icon-plus {
644-
cursor: pointer;
645-
}
646-
}
647-
.data-tree {
648-
padding-top: 8px;
649-
}
650-
.custom-tree-node {
651-
overflow: hidden;
652-
flex: 1;
653-
display: flex;
654-
align-items: center;
655-
justify-content: space-between;
656-
font-size: 14px;
657-
padding-right: 8px;
644+
$delete-color = #E24156;
645+
646+
.el-data-tree {
647+
overflow: hidden;
648+
transition: 0.3s;
649+
650+
&.has-border {
651+
border-radius: 4px;
652+
background-color: #fff;
653+
border: 1px solid #ebeef5;
654+
655+
&:hover, &:focus {
656+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
658657
}
659-
.custom-tree-node-label {
660-
overflow: hidden;
661-
text-overflow: ellipsis
658+
}
659+
660+
.body {
661+
padding: 1rem;
662+
}
663+
664+
.data-tree-title {
665+
display: flex;
666+
align-items: center;
667+
justify-content: space-between;
668+
padding: 18px 20px;
669+
margin: 0;
670+
border-bottom: 1px solid #ebeef5;
671+
box-sizing: border-box;
672+
673+
.el-icon-plus {
674+
cursor: pointer;
662675
}
663-
.delete-button {
676+
}
677+
678+
.data-tree {
679+
padding-top: 8px;
680+
}
681+
682+
.custom-tree-node {
683+
overflow: hidden;
684+
flex: 1;
685+
display: flex;
686+
align-items: center;
687+
justify-content: space-between;
688+
font-size: 14px;
689+
padding-right: 8px;
690+
}
691+
692+
.custom-tree-node-label {
693+
overflow: hidden;
694+
text-overflow: ellipsis;
695+
}
696+
697+
.delete-button {
698+
color: $delete-color;
699+
700+
&:hover, &:focus {
664701
color: $delete-color;
665-
&:hover, &:focus {
666-
color: $delete-color;
667-
}
668702
}
669703
}
704+
}
670705
</style>

‎styleguide.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const path = require('path')
33

44
const docs = [
55
'basic',
6+
'has-title',
67
'dynamic-url',
78
'filter-nodes',
89
'configure-el-tree',

0 commit comments

Comments
 (0)