若依级联选择下拉框

若依级联选择下拉框

1. 系统管理->字典管理加入如下字典

   分类:classify {
       水果 fruit
       鸟类 bird
   }
   水果: fruit{
       西瓜: watermelon
       柚子: pomelo
   }
   鸟类: bird{
       猫头鹰: owl
       燕子: swallow
   }
   

2. 引入字典

   export default {
       name: "zrzySearch",
       // 引入需要的字典, 字典dict为若依全局变量, 在main.js中已引入
       dicts: ['classify','fruit','bird'],
       data() {
           return {
               classifyName: ''   
           }
       }
   }
   

3. 选择器, 用第一个选择器的值作为第二个选择器的字典名称, 第二个选择会选择不同的字典

   <el-form-item label="分类" prop="fqmc">
     <el-select v-model="classifyName" placeholder="请选择分类" clearable>
       <el-option
         v-for="dict in dict.type.classify"
         :key="dict.value"
         :label="dict.label"
         :value="dict.value"
       />
     </el-select>
   </el-form-item>
   <el-form-item label="小类" prop="bkmc">
     <el-select v-model="queryParams.bkmc" placeholder="请选择小类" clearable>
       <el-option
         v-for="dict in dict.type[classifyName]"
         :key="dict.value"
         :label="dict.label"
         :value="dict.value"
       />
     </el-select>
   </el-form-item>