property.vue

<template>
	<Collapse v-model="value1" class="property">
		<Panel name="1">
			列表设置
			<p slot="content">
				标题：    <Input v-model="obj.title" style="width: 180px;margin-left:26px" /><br />
				<!-- 图标：    <Input v-model="obj.icon" style="width: 180px;margin-left:26px" /><br /> -->
				查询SQL： <Input v-model="obj.SQL" style="width: 180px" /><br />
				查询标识：<Input v-model="obj.templateName" style="width: 180px" /><br />
				描述：    <Input v-model="obj.desc" style="width: 180px;margin-left:26px" /><br />
				颜色：    <Select v-model="obj.color" style="width:180px;margin-left:26px">
										<Option v-for="item in colorList" :value="item" :key="item">{{ item }}</Option>
									</Select><br />
			</p>
		</Panel>
	</Collapse>
</template>

<script>
	export default {
		watch: {
			obj: {
				handler(newVal, oldVal) {
					this.itemSetting.properties = newVal
				},
				deep: true,
			},
		},
		props: {
			itemSetting: {
				type: Object,
				default: function() {
					return {};
				}
			},
		},
		data() {
			return {
				value1: null,
				obj: {
					SQL: '',
					title: "我的审批待办",
					templateName: '',
					icon: '#icon-_CDdaibanzhongxinh',
					desc: '',
					color: ''
				},
				colorList: ['info', 'success', 'warning', 'error']
			};
		},
		created() {
			let prop = this.itemSetting.properties;
			if (!prop || prop.length == 0) {
				prop = {};
				prop = this.obj;
			} else if (prop) {
				this.obj = prop;
			}
		},
	};
</script>
<style scoped lang="scss">
	.property {

		div,
		span {
			margin-bottom: 5px;
		}
	}
</style>