使用vue+iview
<template>
<div>
<Form
ref="formItem"
:model="formItem"
:rules="ruleValidate"
:label-width="120"
style="padding: 10px 25px 30px; width: 850px"
>
<Card>
<FormItem label="投诉建议类型" prop="type" class="typeselect">
<span
:class="{ hasChoosen: item.isCheck }"
v-for="(item, index) in sugType"
:key="index"
@click="selectType(item.type)"
>{{ item.type }}</span
>
</FormItem>
<FormItem style="text-align: center; margin-top: 100px">
<Button
style="width: 270px"
type="primary"
@click="handleSubmit('formItem')"
>发布</Button
>
</FormItem>
</Card>
</Form>
</div>
</template>
<script>
export default {
data() {
return {
formItem: {
type: "",
},
sugType: [
{ type: "基础服务类", isCheck: false },
{ type: "物业", isCheck: false },
{ type: "房屋", isCheck: false },
{ type: "餐饮", isCheck: false },
{ type: "其他", isCheck: false },
],
ruleValidate: {
type: [
{
required: true,
type: "string",
message: "投诉建议类型不能为空",
},
],
},
};
},
methods: {
selectType(item) {
this.sugType.forEach((element) => {
if (element.type != item) {
element.isCheck = false;
} else {
element.isCheck = true;
this.formItem.type = item;
}
});
},
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
console.log(this.formItem);
} else {
console.log(this.formItem);
}
});
},
},
};
</script>
<style scoped>
.hasChoosen {
background-color: #2d8cf0 !important;
color: #fff !important;
}
.typeselect span {
width: 80px;
height: 23px;
font-size: 12px;
border-radius: 5px;
display: inline-block;
margin-right: 30px;
text-align: center;
background-color: #f7f7f7;
color: #515a6e;
vertical-align: middle;
line-height: 23px;
cursor: pointer;
}
</style>