若依级联选择下拉框

  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>
    
Logo

快速构建 Web 应用程序

更多推荐