自定义单选标签

使用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>