1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// 表单节点封装，支持 input textarea select radio checkbox 及slot方式
<template>
<el-col :span='span'>
<el-form-item :label="label" :prop="prop" class='my-form-field'>
<slot>
<el-input :disabled='disabled' :placeholder='placeholder' v-model="field" @change="emit" @input="emit" v-if='type === "text"' :class="inputClass" :clearable='clearable'></el-input>
<el-input :disabled='disabled' :placeholder='placeholder' v-model="field" @change="emit" @input="emit" type='password' v-if='type === "password"'></el-input>
<el-input :disabled='disabled' :placeholder='placeholder' v-model="field" @change="emit" :rows='rows' @input="emit" v-if='type === "textarea"' type='textarea' :autosize="textareaSize" :class="inputClass"></el-input>
<el-select :disabled='disabled' v-model="field" @change="emit" :multiple='multiple' :filterable='filterable' :clearable='clearable' v-if='type === "select"'>
<el-option
v-for="($label, $value) in enumData"
:key="$value"
:label="$label"
:value="$value"
></el-option>
</el-select>
<el-radio-group :disabled='disabled' v-model="field" @change="emit" v-if='type === "radio"'>
<el-radio
v-for='($label, $value) in enumData'
:key='$value'
:label="$value"
>{{$label}}</el-radio>
</el-radio-group>
<el-checkbox-group :disabled='disabled' v-model="field" @change="emit" v-if='type === "checkbox"'>
<el-checkbox
v-for='($label, $value) in enumData'
:key='$value'
:label="$value"
>{{$label}}</el-checkbox>
</el-checkbox-group>
<el-date-picker :disabled='disabled' type="date" value-format="yyyy-MM-dd HH:mm:ss" v-model="field" @change="emit" @input="emit" placeholder="选择日期" v-if='type === "date"'></el-date-picker>
<el-date-picker :disabled='disabled' type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="field" @change="emit" @input="emit" placeholder="选择日期" v-if='type === "datetime"'></el-date-picker>
</slot>
</el-form-item>
</el-col>
</template>
<script>
export default {
props: {
// 字段值
value: {
type: [String, Number, Array],
},
// 组件的el-col span宽度 1-24,默认12
span: {
type: Number,
default: 12,
},
// 字段类型: text,password,textarea,select,radio,checkbox,date,datetime
type: {
type: String,
default: 'text',
},
// 字段name
prop: {
type: String,
default: '',
},
// 字段中文标题
label: {
type: String,
default: '',
},
// 是否禁用
disabled: {
type: Boolean,
default: false,
},
// 是否提示
placeholder: {
type: String,
default: '',
},
// 字段所需的枚举类型
enumData: {
type: Object,
default: ()=>{},
},
// textarea专用-自适应内容高度
textareaSize: {
type: Object,
default: ()=>{},
},
// select专用-是否可搜索
filterable: {
type: Boolean,
default: false,
},
// select专用-是否多选
multiple: {
type: Boolean,
default: false,
},
// select专用-是否可取消
clearable: {
type: Boolean,
default: false,
},
// 字段所需的枚举类型
options: {
type: Array,
default: ()=>[],
},
children: {
type: Array,
default: ()=>[],
},
inputClass: {
type: String,
default: '',
}
},
methods: {
emit() {
this.$emit('input', this.newVal)
this.$emit('change', this.newVal)
}
},
computed: {
field: {
get() {
return this.value
},
set(val) {
this.newVal = val;
}
}
},
data() {
return {
newVal: this.value,
}
}
}
</script>