79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<!--
|
|
* @FilePath: \code\Goats-Cloud-ui\src\views\big\device\components\Wform.vue
|
|
* @Author: 王路平
|
|
* @文件版本: V1.0.0
|
|
* @Date: 2023-06-27 16:27:26
|
|
* @Description:
|
|
*
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<el-form :model="tempData" :label-position="config.labelPosition">
|
|
<el-form-item :label="item.label" v-for="item in config.formItem" :key="item.model" :label-width="item.labelWidth">
|
|
<!-- //输入框配置 -->
|
|
<el-input v-if="item.content.type=='input'" v-model="tempData[item.content.model]" :readonly="item.content.readonly" :disabled="item.content.disabled" :type="item.content.textarea?'textarea':''"/>
|
|
<!-- 多选框配置 -->
|
|
<el-checkbox-group v-if="item.content.type=='checkbox'" v-model="tempData[item.content.model]">
|
|
<el-checkbox :label="checkItem.val" :disabled="checkItem.disabled" v-for="checkItem in item.content.value" :key="checkItem.id"/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref} from "vue"
|
|
const prop = defineProps({
|
|
config: {
|
|
type: Object,
|
|
default: {
|
|
labelPosition:'top',
|
|
formItem:[
|
|
{ //输入框
|
|
label:'默认',
|
|
labelWidth:'120px',
|
|
content:{
|
|
type:'input',
|
|
model:"name",
|
|
readonly:true,
|
|
disabled:true,
|
|
textarea:false
|
|
}
|
|
},
|
|
{ //多选框
|
|
label:'多选',
|
|
labelWidth:'auto',
|
|
content:{
|
|
type:'checkbox',
|
|
model:"checkbox",
|
|
value:[{
|
|
id:1,
|
|
val:'多选',
|
|
disabled:true,
|
|
}]
|
|
}
|
|
},]
|
|
},
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: {
|
|
name:'',
|
|
checkbox:[]
|
|
},
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:data'])
|
|
//实现父子组件数据双向绑定
|
|
const tempData = computed({
|
|
get: () => prop.data,
|
|
set: val => {
|
|
emit('update:data', val)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|