console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
	<div id="app" style="width: 60%">
		<h1>Vue 设置自定义属性演示</h1>
		<!-- 表单 -->
		<el-form label-width="80px">
			<!-- 循环显示自定义属性 -->
			<el-form-item v-for="attr in attrs" :label="attr.name">
				<!-- 如果是文本，则使用 Input 输入框 -->
				<el-input v-if="attr.type === 'TEXT'" v-model="attr.setValues[0]"></el-input>
				<!-- 如果是单选，则使用 Select 选择器-->
				<el-select v-if="attr.type === 'SINGLE_CHOICE'" v-model="attr.setValues[0]">
					<el-option v-for="value in attr.values" :key="value.key" :label="value.name" :value="value.key">
					</el-option>
				</el-select>
				<!-- 如果是多选，则使用 Checkbox 多选框-->
				<el-checkbox-group v-if="attr.type === 'MULTI_CHOICE'" v-model="attr.setValues">
					<el-checkbox v-for="value in attr.values" :label="value.key">{{ value.name }}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
            <!-- 保存按钮，将打印设置的属性信息 -->
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js">

</script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>
<script>
	new Vue({
      el: '#app',
      data: function() {
        return { 
            visible: false,
            settedColor: '',
            // 自定义属性
            attrs:[
                // 爱好，输入框
                {
                    key: 'HOBBY',
                    name: '爱好',
                    type: 'TEXT',
                    setValues: [],
                    values:[]
                },
                // 性别，单选
                {
                    key: 'GENDER',
                    name: '性别',
                    type: 'SINGLE_CHOICE',
                    setValues: [],
                    values:[{
                        key: 'MALE',
                        name: '男'
                    },{
                        key: 'FEMALE',
                        name: '女'
                    }]
                },
                // 颜色，多选
                {
                    key: 'COLOR',
                    name: '颜色',
                    type: 'MULTI_CHOICE',
                    setValues: [],
                    values:[{
                        key: 'RED',
                        name: '红色'
                    },{
                        key: 'YELLOW',
                        name: '黄色'
                    },{
                        key: 'BLUE',
                        name: '蓝色'
                    }]
                }
            ]
        }
      },
      methods: {
          save() {
              // 
              console.log('========== 设置的属性为 ========== ')
              this.attrs.forEach(attr => {
                  if (attr.setValues && attr.setValues.length > 0) {
                      console.log(attr.key + '：' + attr.setValues)
                  }
              });
          }
      }
    })

</script>

</html>