You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.3 KiB
85 lines
2.3 KiB
<template>
|
|
<div class="tableClass">
|
|
<el-form :model="formData" label-suffix="：" inline :disabled="disabled">
|
|
<el-form-item :label="formItem.label" :key="formIndex" v-for="(formItem, formIndex) in formHeader">
|
|
<template v-if="formItem.type === 'text'">
|
|
<el-input v-model="formData[formItem.prop]" />
|
|
</template>
|
|
<template v-else-if="formItem.type === 'select'">
|
|
<el-select v-model="formData[formItem.prop]" :placeholder="`请选择${formItem.label}`" style="width: 240px">
|
|
<el-option v-for="item in formData[formItem.prop + 'xuanxiang']" :key="item.value" :label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
</template>
|
|
<template v-else-if="formItem.type === 'number'">
|
|
<el-input-number v-model="formData[formItem.prop]">
|
|
<template #decrease-icon>
|
|
<el-icon>
|
|
<ArrowDown />
|
|
</el-icon>
|
|
</template>
|
|
<template #increase-icon>
|
|
<el-icon>
|
|
<ArrowUp />
|
|
</el-icon>
|
|
</template>
|
|
</el-input-number>
|
|
</template>
|
|
<template v-else-if="formItem.type === 'date'">
|
|
<el-date-picker v-model="formData[formItem.prop]" type="date" :placeholder="`请选择${formItem.label}`" />
|
|
</template>
|
|
<template v-else-if="formItem.type === 'boolean'">
|
|
<el-switch v-model="formData[formItem.prop]" active-text="是" inactive-text="否" />
|
|
</template>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash'
|
|
import dayjs from 'dayjs'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
export default {
|
|
name: 'dingdanformcomponent',
|
|
components: {},
|
|
props: {
|
|
formHeader: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
}
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return false
|
|
}
|
|
}
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
_: _,
|
|
dayjs: dayjs,
|
|
|
|
}
|
|
},
|
|
methods: {},
|
|
async mounted() { },
|
|
watch: {},
|
|
computed: {}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.tableClass {
|
|
text-align: left;
|
|
text-align-last: left;
|
|
}
|
|
</style>
|
|
|