vue.js+element-ui에서 "여러 가지 선택"을 통해 폼의 표시와 숨김을 제어합니다

하고 싶은 일

여러 개의 그룹 선택이 있으면 선택 (값) 을 선택하면 그룹에 따라 다른 폼이 표시됩니다.

효과도

두 개의 조가 있다.

그룹 1(select1~3)에서 임의의 옵션을 선택하면aa+bbb의 폼을 표시할 수 있습니다.

그룹 2(select4-5)에서 임의의 옵션을 선택하면cc+ddd 폼을 표시할 수 있습니다.

코드 분석

<el-select style="width:60%" v-model="value" placeholder="Select" @change='getValue'>
        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>

@change='getValue'에서 v-model='value'에서 귀속 정의의 여러 가지 선택 값을 얻을 수 있습니다.

<el-form :rules="rules" :label-position="labelPosition" label-width="100px" ref="form" :model="form" v-if="isShow1">

      <el-form-item label="aaa">
        <el-input v-model="form.name1"></el-input>
      </el-form-item>
      <el-form-item label="bbb">
        <el-input v-model="form.name2"></el-input>
      </el-form-item>

    </el-form>

v-if = isShow1은 양식의 표시 및 숨기기를 제어합니다.

코드 전문

select.vue

<style>

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-textarea {
width:80%;
}


.el-input {
width:80%
}
</style>

<template>
<div>


  <el-card style="margin:0 auto;width:70%;">

    <el-row :label-position="labelPosition" label-width="100px" >
      <span好きな果物を選択してください　　</span>
    </el-row>
    <el-row :label-position="labelPosition" label-width="100px" >
      <el-select style="width:60%" v-model="value" placeholder="Select" @change='getValue'>
        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
    </el-row>
    <el-divider></el-divider>

    <el-form :rules="rules" :label-position="labelPosition" label-width="100px" ref="form" :model="form" v-if="isShow1">

      <el-form-item label="aaa">
        <el-input v-model="form.name1"></el-input>
      </el-form-item>
      <el-form-item label="bbb">
        <el-input v-model="form.name2"></el-input>
      </el-form-item>

    </el-form>

    <el-form :label-position="labelPosition" label-width="100px" ref="form" :model="form" v-if="isShow2">
      <el-form-item label="ccc">
        <el-input v-model="form.name3"></el-input>
      </el-form-item>

      <el-form-item label="ddd">
        <el-input type="textarea"></el-input>
      </el-form-item>

    </el-form>


  </el-card>
</div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        label: 'group1',
        options: [{
          value: 'select1',
          label: 'select1'
        }, {
          value: 'select2',
          label: 'select2'
        }, {
          value: 'select3',
          label: 'select3'
        }]
      }, {
        label: 'group2',
        options: [{
          value: 'select4',
          label: 'select4'
        }, {
          value: 'select5',
          label: 'select5'
        }]
      }],
      value: '',
      isShow1: false,
      isShow2: false,
      form: {
        name1: '',
        name2: '',
        name3: '',
        desc: ''
      }
    }
  },
  methods: {
    getValue: function() {
      console.log(this.value, '選択されました');
      if (this.value == "select4" || this.value == "select5") {
        this.isShow1 = false;
        this.isShow2 = true;
        console.log("isShow2 is show ");
      } else {
        this.isShow2 = false;
        this.isShow1 = true;
        console.log("isShow1 is show");
      }
    }
  }
}
</script>