若依VUE前后端分离项目，加载下拉框列表

效果：

实现方法两种，第一使用若依的字段属性值，将字段维护于字典中，然后在对应的模块下加载对应的模块值。第二种，自定义下拉框数值，可维护性差

第一种实现

加载模块

export default {dicts: ["diary_strategy"],//此处是在字典中添加的键值}

搜索框

      <el-form-item label="模块" prop="module"><el-selectv-model="queryParams.module"placeholder="请选择模块"clearablesize="small"><el-optionv-for="dict in dict.type.diary_strategy":key="dict.value":label="dict.label":value="dict.value"/>el-select>el-form-item>

列表

 <el-table-column label="模块" align="center" prop="module"><template slot-scope="scope"><dict-tag :options="dict.type.diary_strategy" :value="scope.row.module" />template>el-table-column>

新增/修改

   <el-form-item label="模块" prop="module"><el-select v-model="form.module" placeholder="请选择挂载模块"><el-optionv-for="dict in dict.type.diary_strategy":key="dict.value":label="dict.label":value="dict.value"/>el-select>el-form-item>

注意：dict.type.diary_strategy，diary_strategy 为自定义的模块键值，此方法适用于若依VUE

第二种实现

首先先自定义一个数组

 data() {return {testType:[{ id: 2, value: "旅游日记" },{ id: 1, value: "旅游攻略" },],}}

搜索框

   <el-select v-model="queryParams.type" placeholder="请选择文件类型" clearable size="small"><el-optionv-for="(item, index) in testType":key="index":label="item.value":value="item.id">el-option>el-select>

v-model=“queryParams.type” 为参数名称
v-for=“(item, index) in testType” 此处 in 后面为自定义的数组名称

列表

 <el-table-column label="模块" align="center" prop="type"><template slot-scope="scope"><dict-tag :options="(item, index) in testType" :label="item.value"  :value="item.id"  :key="index"/>template>el-table-column>

新增/修改

 <el-form-item label="文件类型" prop="type"><el-select v-model="form.type" placeholder="请选择文件类型"><el-optionv-for="(item, index) in testType":key="index":label="item.value":value="item.id">el-option>el-select>el-form-item>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！