Skip to content

Commit 4580767

Browse files
SmallRuralDogSmallRuralDog
committed
表单布局优化
1 parent bc68acf commit 4580767

File tree

4 files changed

+136
-135
lines changed

4 files changed

+136
-135
lines changed

‎public/app.js

Lines changed: 88 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -31539,7 +31539,6 @@ var render = function() {
3153931539
"el-form-item",
3154031540
{
3154131541
attrs: {
31542-
label: item.label,
3154331542
prop: item.prop,
3154431543
"label-width": item.labelWidth,
3154531544
error: item.error,
@@ -31550,98 +31549,99 @@ var render = function() {
3155031549
}
3155131550
},
3155231551
[
31552+
!item.hideLabel
31553+
? _c(
31554+
"span",
31555+
{
31556+
attrs: { slot: "label" },
31557+
slot: "label"
31558+
},
31559+
[_vm._v(_vm._s(item.label))]
31560+
)
31561+
: _vm._e(),
31562+
_vm._v(" "),
3155331563
[
3155431564
_c(
31555-
"el-row",
31565+
"el-col",
31566+
{
31567+
attrs: { span: item.inputWidth }
31568+
},
3155631569
[
31557-
_c(
31558-
"el-col",
31559-
{
31560-
attrs: {
31561-
span: item.inputWidth
31562-
}
31563-
},
31564-
[
31565-
item.relationName
31566-
? [
31567-
_c("ItemDiaplsy", {
31568-
attrs: {
31569-
form_item: item,
31570-
form_items:
31571-
_vm.attrs
31572-
.formItems,
31573-
form_data:
31574-
_vm.formData
31575-
},
31576-
model: {
31577-
value:
31578-
_vm.formData[
31579-
item
31580-
.relationName
31581-
][
31582-
item
31583-
.relationValueKey
31584-
],
31585-
callback: function(
31586-
$$v
31587-
) {
31588-
_vm.$set(
31589-
_vm.formData[
31590-
item
31591-
.relationName
31592-
],
31593-
item.relationValueKey,
31594-
$$v
31595-
)
31596-
},
31597-
expression:
31598-
"\n formData[item.relationName][item.relationValueKey]\n "
31599-
}
31600-
})
31601-
]
31602-
: [
31603-
_c("ItemDiaplsy", {
31604-
attrs: {
31605-
form_item: item,
31606-
form_data:
31607-
_vm.formData
31608-
},
31609-
model: {
31610-
value:
31611-
_vm.formData[
31612-
item.prop
31613-
],
31614-
callback: function(
31615-
$$v
31616-
) {
31617-
_vm.$set(
31618-
_vm.formData,
31619-
item.prop,
31620-
$$v
31621-
)
31622-
},
31623-
expression:
31624-
"formData[item.prop]"
31625-
}
31626-
})
31627-
],
31628-
_vm._v(" "),
31629-
item.help
31630-
? _c("div", {
31631-
staticClass:
31632-
"form-item-help",
31633-
domProps: {
31634-
innerHTML: _vm._s(
31635-
item.help
31570+
item.relationName
31571+
? [
31572+
_c("ItemDiaplsy", {
31573+
attrs: {
31574+
form_item: item,
31575+
form_items:
31576+
_vm.attrs.formItems,
31577+
form_data:
31578+
_vm.formData
31579+
},
31580+
model: {
31581+
value:
31582+
_vm.formData[
31583+
item.relationName
31584+
][
31585+
item
31586+
.relationValueKey
31587+
],
31588+
callback: function(
31589+
$$v
31590+
) {
31591+
_vm.$set(
31592+
_vm.formData[
31593+
item
31594+
.relationName
31595+
],
31596+
item.relationValueKey,
31597+
$$v
3163631598
)
31637-
}
31638-
})
31639-
: _vm._e()
31640-
],
31641-
2
31642-
)
31599+
},
31600+
expression:
31601+
"\n formData[item.relationName][item.relationValueKey]\n "
31602+
}
31603+
})
31604+
]
31605+
: [
31606+
_c("ItemDiaplsy", {
31607+
attrs: {
31608+
form_item: item,
31609+
form_data:
31610+
_vm.formData
31611+
},
31612+
model: {
31613+
value:
31614+
_vm.formData[
31615+
item.prop
31616+
],
31617+
callback: function(
31618+
$$v
31619+
) {
31620+
_vm.$set(
31621+
_vm.formData,
31622+
item.prop,
31623+
$$v
31624+
)
31625+
},
31626+
expression:
31627+
"formData[item.prop]"
31628+
}
31629+
})
31630+
],
31631+
_vm._v(" "),
31632+
item.help
31633+
? _c("div", {
31634+
staticClass:
31635+
"form-item-help",
31636+
domProps: {
31637+
innerHTML: _vm._s(
31638+
item.help
31639+
)
31640+
}
31641+
})
31642+
: _vm._e()
3164331643
],
31644-
1
31644+
2
3164531645
)
3164631646
]
3164731647
],

‎resources/js/components/form/Form.vue

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -48,42 +48,42 @@
4848
/>
4949

5050
<el-form-item
51-
:label="item.label"
5251
:prop="item.prop"
5352
:label-width="item.labelWidth"
5453
:error="item.error"
5554
:show-message="item.showMessage"
5655
:inline-message="item.inlineMessage"
5756
:size="item.size"
5857
>
58+
<span slot="label" v-if="!item.hideLabel">{{
59+
item.label
60+
}}</span>
5961
<template>
60-
<el-row>
61-
<el-col :span="item.inputWidth">
62-
<template v-if="item.relationName">
63-
<ItemDiaplsy
64-
v-model="
65-
formData[item.relationName][item.relationValueKey]
66-
"
67-
:form_item="item"
68-
:form_items="attrs.formItems"
69-
:form_data="formData"
70-
/>
71-
</template>
72-
<template v-else>
73-
<ItemDiaplsy
74-
v-model="formData[item.prop]"
75-
:form_item="item"
76-
:form_data="formData"
77-
/>
78-
</template>
62+
<el-col :span="item.inputWidth">
63+
<template v-if="item.relationName">
64+
<ItemDiaplsy
65+
v-model="
66+
formData[item.relationName][item.relationValueKey]
67+
"
68+
:form_item="item"
69+
:form_items="attrs.formItems"
70+
:form_data="formData"
71+
/>
72+
</template>
73+
<template v-else>
74+
<ItemDiaplsy
75+
v-model="formData[item.prop]"
76+
:form_item="item"
77+
:form_data="formData"
78+
/>
79+
</template>
7980

80-
<div
81-
v-if="item.help"
82-
class="form-item-help"
83-
v-html="item.help"
84-
></div>
85-
</el-col>
86-
</el-row>
81+
<div
82+
v-if="item.help"
83+
class="form-item-help"
84+
v-html="item.help"
85+
></div>
86+
</el-col>
8787
</template>
8888
</el-form-item>
8989
<component

‎src/Form.php

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ class Form extends Component
3535
protected $formItemsAttr = [];
3636
protected $formItemsValue = [];
3737
protected $formRules = [];
38+
protected $formItemRows = [];
3839
protected $formItems = [];
3940

4041
protected $tabs = [];
@@ -104,6 +105,11 @@ public function item($prop, $label = '', $field = '')
104105
return $this->addItem($prop, $label, $field);
105106
}
106107

108+
public function row(){
109+
110+
return $this;
111+
}
112+
107113
/**
108114
* @param $prop
109115
* @param $label

‎src/Form/FormItem.php

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ class FormItem
1313
{
1414
protected $prop;
1515
protected $label;
16+
protected $hideLabel=false;
1617
protected $field;
1718
protected $labelWidth;
1819
protected $inputWidth = 24;
@@ -98,6 +99,19 @@ public function setOriginal($data)
9899
$this->original = Arr::get($data, $this->prop);
99100
}
100101

102+
/**
103+
* 隐藏Label
104+
* @return $this
105+
*/
106+
public function hideLabel()
107+
{
108+
$this->labelWidth("auto");
109+
$this->hideLabel = true;
110+
return $this;
111+
}
112+
113+
114+
101115
/**
102116
* 设置头部组件
103117
* @param $component
@@ -128,21 +142,6 @@ public function footerComponent($component)
128142
return $this;
129143
}
130144

131-
/**
132-
* @param $component
133-
* @return $this
134-
* @deprecated
135-
*/
136-
public function displayComponent($component)
137-
{
138-
if ($component instanceof \Closure) {
139-
$this->component = call_user_func($component);
140-
} else {
141-
$this->component = $component;
142-
}
143-
return $this;
144-
}
145-
146145
/**
147146
* 设置组件
148147
* @param $component
@@ -158,11 +157,6 @@ public function component($component)
158157
return $this;
159158
}
160159

161-
public function getDisplayComponent()
162-
{
163-
return $this->component;
164-
}
165-
166160
/**
167161
* @return mixed
168162
*/
@@ -578,6 +572,7 @@ public function getAttrs()
578572
'prop' => $this->prop,
579573
'label' => $this->label,
580574
'field' => $this->field,
575+
'hideLabel' => $this->hideLabel,
581576
'labelWidth' => $this->labelWidth,
582577
'inputWidth' => $this->inputWidth,
583578
'required' => $this->required,

0 commit comments

Comments
 (0)