下拉框循环表单

最新推荐文章于 2024-11-07 09:58:36 发布

想退休的搬砖人

最新推荐文章于 2024-11-07 09:58:36 发布

阅读量355

点赞数 10

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/2301_79568779/article/details/136549214

版权

本文介绍了如何在Vue应用中使用el-select组件并结合v-model实现动态渲染，以及如何根据用户选择的选项显示对应的参数。

摘要由CSDN通过智能技术生成

<template>
    <el-select
      v-model="type"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    {{ type }}
    <br><br>
    <el-form label-width="auto" style="max-width: 200px">
      <div v-for="(item,index) in options">
        <div v-if="type==index+1">
          <el-form-item v-for="sonItem in item.params" :label="sonItem.label">
            <el-input v-model="sonItem.value" />
          </el-form-item>
        </div>
      </div>
    </el-form>
    <button @click="getData">确认</button>
</template>

<script setup>
import { ref, reactive } from 'vue'
const type = ref('1')
const options = reactive([
  {
    value: '1',
    label: '1',
    params:[{label:'a1',name:'a1',value:''},{label:'b1',name:'b1',value:''},{label:'c1',name:'c1',value:''}]
  },
  {
    value: '2',
    label: '2',
    params:[{label:'a2',name:'a2' ,value:''},{label:'2b',name:'2b',value:''}]
  },
  {
    value: '3',
    label: '3',
    params:[{label:'3a',name:'3a',value:''},{label:'3b',name:'3b',value:''}]
  },
  {
    value: '4',
    label: '4',
    params:[{label:'4a',name:'4a',value:''},{label:'4b',name:'4b',value:''}]
  },
  {
    value: '5',
    label: '5',
    params:[{label:'5a',name:'5a',value:''},{label:'5b',name:'5b',value:''}]
  },
]);

const getData= ()=>{
  console.log('type',type);
  let data= options.find((item)=>{
    return item.type==type.value;
  })
  console.log('data',data.params[0]);
};
</script>
<style scoped>
</style>