framework / eagle-web-toolkit

Download as
Browse Code »

Commit ddaaa9f333720f599d4b601a75a5c892f18c07d1

Authored by Aaron
1 parent 491c5ab1
Exists in master and in 1 other branch legacy

完善Detail文档

Showing 4 changed files with 75 additions and 13 deletions   Show diff stats
examples/styles/markdown.scss
  Diff comments   View file @ddaaa9f
@@ -89,6 +89,7 @@ @@ -89,6 +89,7 @@
89 border-bottom: 1px solid $border; 89 border-bottom: 1px solid $border;
90 text-align: left; 90 text-align: left;
91 padding: 10px 15px; 91 padding: 10px 15px;
  92 + max-width: 250px;
92 } 93 }
93 & > table th { 94 & > table th {
94 white-space: nowrap; 95 white-space: nowrap;
examples/views/docs/component/detail.md
  Diff comments   View file @ddaaa9f
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 10
11 ```html 11 ```html
12 <template> 12 <template>
13 - <eagle-detail :value="model" :list="list" style="width: 800px;"></eagle-detail> 13 + <eagle-detail v-model="model" :list="list" style="width: 800px;"></eagle-detail>
14 </template> 14 </template>
15 15
16 <script> 16 <script>
@@ -45,7 +45,7 @@ export default { @@ -45,7 +45,7 @@ export default {
45 45
46 将需要展示的数据分组显示 46 将需要展示的数据分组显示
47 47
48 -::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组 48 +::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组，group可以是一个Object，用于快速配置一些预置的效果
49 49
50 ```html 50 ```html
51 <template> 51 <template>
@@ -55,6 +55,7 @@ export default { @@ -55,6 +55,7 @@ export default {
55 <script> 55 <script>
56 export default { 56 export default {
57 data() { 57 data() {
  58 + const partnerGroup = { key: 'partner', icon: 'star-on', label: '附加信息' }
58 return { 59 return {
59 list: [ 60 list: [
60 { key: 'name', label: '姓名' }, 61 { key: 'name', label: '姓名' },
@@ -62,7 +63,7 @@ export default { @@ -62,7 +63,7 @@ export default {
62 { key: 'political', label: '政治面貌', group: '工作信息' }, 63 { key: 'political', label: '政治面貌', group: '工作信息' },
63 { key: 'troop', label: '部队番号', group: '工作信息' }, 64 { key: 'troop', label: '部队番号', group: '工作信息' },
64 { key: 'position', label: '职务', group: '工作信息' }, 65 { key: 'position', label: '职务', group: '工作信息' },
65 - { key: 'partner', label: '搭档', group: '工作信息' }, 66 + { key: 'partner', label: '搭档', group: partnerGroup },
66 ], 67 ],
67 model: { 68 model: {
68 name: '李云龙', 69 name: '李云龙',
@@ -82,19 +83,21 @@ export default { @@ -82,19 +83,21 @@ export default {
82 83
83 ## 自定义内容 84 ## 自定义内容
84 85
85 -基本的数据展示并不能满足复杂页面展示需求，因此可以通过**具名插槽**的方式替换对应的展示位 86 +基本的数据展示并不能满足复杂页面展示需求，因此可以通过**列表项具名插槽**的方式替换对应的展示位
86 87
87 -::: snippet 在list配置项中使用`group`配置分组参数，任意一个数据配置group时开始生效，若没有配置分组则默认归为**基本信息**分组 88 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，列表项具名插槽格式为`item-key`，返回值有model、value及对应配置项所有参数
88 89
89 ```html 90 ```html
90 <template> 91 <template>
91 <eagle-detail :value="model" :list="list" style="width: 800px;"> 92 <eagle-detail :value="model" :list="list" style="width: 800px;">
92 - <!-- <template #item-position="{ value }"> 93 + <template #item-position="{ value }">
93 <el-tag type="primary" size="small">{{ value }}</el-tag> 94 <el-tag type="primary" size="small">{{ value }}</el-tag>
94 - </template> -->  
95 - <el-tag slot="item-position" slot-scope="{ value }" type="primary" size="small">{{ value }}</el-tag> 95 + </template>
96 <template #item-partner="{ model }"> 96 <template #item-partner="{ model }">
97 - <el-tag type="danger" size="small">{{ model ? model.partner : '-' }}</el-tag> 97 + <el-tag type="danger" size="small">{{ model.partner }}</el-tag>
  98 + </template>
  99 + <template #item-picture="{ value }">
  100 + <img :src="value" height="100" />
98 </template> 101 </template>
99 </eagle-detail> 102 </eagle-detail>
100 </template> 103 </template>
@@ -102,6 +105,7 @@ export default { @@ -102,6 +105,7 @@ export default {
102 <script> 105 <script>
103 export default { 106 export default {
104 data() { 107 data() {
  108 +
105 return { 109 return {
106 list: [ 110 list: [
107 { key: 'name', label: '姓名' }, 111 { key: 'name', label: '姓名' },
@@ -110,6 +114,7 @@ export default { @@ -110,6 +114,7 @@ export default {
110 { key: 'troop', label: '部队番号', group: '工作信息' }, 114 { key: 'troop', label: '部队番号', group: '工作信息' },
111 { key: 'position', label: '职务', group: '工作信息' }, 115 { key: 'position', label: '职务', group: '工作信息' },
112 { key: 'partner', label: '搭档', group: '工作信息' }, 116 { key: 'partner', label: '搭档', group: '工作信息' },
  117 + { key: 'picture', label: '图片', group: '证明材料' },
113 ], 118 ],
114 model: { 119 model: {
115 name: '李云龙', 120 name: '李云龙',
@@ -118,6 +123,7 @@ export default { @@ -118,6 +123,7 @@ export default {
118 troop: '独立团', 123 troop: '独立团',
119 position: '团长', 124 position: '团长',
120 partner: '赵刚', 125 partner: '赵刚',
  126 + picture: '/img/logo.svg',
121 } 127 }
122 } 128 }
123 }, 129 },
@@ -127,7 +133,59 @@ export default { @@ -127,7 +133,59 @@ export default {
127 133
128 ::: 134 :::
129 135
130 ---- 136 +## 自定义表头
  137 +
  138 +在特定的业务场景下，分组标题需要展示图标或旁边需要放置按钮，此时便可以使用**表头具名插槽**替换表头内容
  139 +
  140 +> 注意：自定义表头只支持Object类型的group配置
  141 +
  142 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，表头具名插槽格式为`group-key`，返回值包括key及group配置内容
  143 +
  144 +```html
  145 +<template>
  146 + <eagle-detail :value="model" :list="list" style="width: 800px;">
  147 + <template #group-work="{ label }">
  148 + <div style="padding: 15px 5px;border-bottom: 1px solid #e8e8e8;display: flex;justify-content: space-between;">
  149 + <span>{{ label }}
  150 + <el-tooltip class="item" effect="light" content="保密条例" placement="top">
  151 + <template #content><span style="color: red;padding-right: 5px;">*</span>保密条例</template>
  152 + <i class="el-icon-info"></i>
  153 + </el-tooltip>
  154 + </span>
  155 + <el-button size="mini" type="primary">下载</el-button>
  156 + </div>
  157 + </template>
  158 + </eagle-detail>
  159 +</template>
  160 +
  161 +<script>
  162 +export default {
  163 + data() {
  164 + const groupWork = { key: 'work', label: '工作信息' };
  165 + return {
  166 + list: [
  167 + { key: 'name', label: '姓名' },
  168 + { key: 'age', label: '年龄' },
  169 + { key: 'political', label: '政治面貌', group: groupWork },
  170 + { key: 'troop', label: '部队番号', group: groupWork },
  171 + { key: 'position', label: '职务', group: groupWork },
  172 + { key: 'partner', label: '搭档', group: groupWork },
  173 + ],
  174 + model: {
  175 + name: '李云龙',
  176 + age: 18,
  177 + political: '中共党员',
  178 + troop: '独立团',
  179 + position: '团长',
  180 + partner: '赵刚',
  181 + }
  182 + }
  183 + },
  184 +}
  185 +</script>
  186 +```
  187 +
  188 +:::
131 189
132 ## API 190 ## API
133 191
@@ -139,6 +197,8 @@ value / v-model | 绑定值 | Object | - | {} @@ -139,6 +197,8 @@ value / v-model | 绑定值 | Object | - | {}
139 list | 表单项配置列表 | Array | - | [] 197 list | 表单项配置列表 | Array | - | []
140 formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {} 198 formProps | [el-form组件参数](https://element.eleme.cn/#/zh-CN/component/form#form-attributes) | Object | - | {}
141 span | 数据项占位 | Number | 0 - 24 | 8 199 span | 数据项占位 | Number | 0 - 24 | 8
  200 +formatter | 格式化 | Function | - | -
  201 +agentKey | 代理key，用另一个key的值表示当前内容 | String | - | -
142 202
143 ## List 表单项配置列表 203 ## List 表单项配置列表
144 204
@@ -146,4 +206,5 @@ span | 数据项占位 | Number | 0 - 24 | 8 @@ -146,4 +206,5 @@ span | 数据项占位 | Number | 0 - 24 | 8
146 -|-|-|-|- 206 -|-|-|-|-
147 key | 参数名 | String | - | - 207 key | 参数名 | String | - | -
148 label | 参数标签 | String | - | - 208 label | 参数标签 | String | - | -
149 -span | 数据项占位 | Number | 0 - 24 | -  
150 \ No newline at end of file 209 \ No newline at end of file
  210 +span | 数据项占位 | Number | 0 - 24 | -
  211 +group | 数据项分组，为**Object**类型时，格式为{ key, icon, label }，key=>分组标识、icon=>Element默认图标名、label=>分组标题 | String,Object | - | -
packages/form/index.vue
  Diff comments   View file @ddaaa9f
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 <template v-for="(item, index) in data.list"> 33 <template v-for="(item, index) in data.list">
34 <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span"> 34 <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
35 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)"> 35 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)">
36 - <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" v-bind="item"></slot> 36 + <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" :value="model[item.key]" v-bind="item"></slot>
37 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)"> 37 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
38 <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot> 38 <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
39 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component> 39 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
packages/search/index.vue
  Diff comments   View file @ddaaa9f
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 <el-col v-if="bindItemVisible(item.visible)" v-show="!(collapse && index > visibleColNum - 2)" :key="index + 'data'" :span="!item.span ? span : item.span"> 14 <el-col v-if="bindItemVisible(item.visible)" v-show="!(collapse && index > visibleColNum - 2)" :key="index + 'data'" :span="!item.span ? span : item.span">
15 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules"> 15 <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
16 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)"> 16 <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
17 - <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" v-bind="item"></slot> 17 + <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" :model="model" :value="model[item.key]" v-bind="item"></slot>
18 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component> 18 <component v-else :is="item.type || 'el-input'" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
19 </el-tooltip> 19 </el-tooltip>
20 </el-form-item> 20 </el-form-item>