Tabs of element form forms toggle content

recently, the company has a demand like this.

clipboard.png
*

clipboard.png
there are only three entries in the original form form. Now I choose the first one and will display the odd number * quantity setting input box, which is five. If the
is replaced with the second item, it will become different again, and it may also become six,

.
<el-form-item label="" class="formItem icon">
            <!-- <img src="~assets/image/asterisk.png" alt class="Asterisk"> -->
            <!-- <el-input class="tollForm"></el-input> -->
            <el-select v-model="region" placeholder="">
              <el-option
                v-for="option in options"
                :value="option.value"
                :key="option.id"
              >{{option.value}}</el-option>
              <!-- <el-option label="" value=""></el-option>
              <el-option label="" value=""></el-option>
              <el-option label="" value=""></el-option>-->
            </el-select>
          </el-form-item>

I intend to achieve this, but I don"t know what to do next. Ask the boss to take a look at how to switch to display different form in the drop-down options, which is a bit similar to the tab, but it is not a drop-down option, online, etc.

Jul.05,2022

you can judge which components are displayed according to the value of the amount calculation method. Use v-if


to write v-if on your unit price and measurement method to determine that the value of your region is equal to the value of the value you choose. If there are more than one, wrap the v-if in the div or span tag and write the v-if on the div or span tag


to monitor the value of region

.
Menu