假设表category为主表，字段id, title分别为问题分类的ID和标题；
假设表faq为子表，其category字段管理主表的ID字段；
假设没有使用若依自身代码生成定义成主子表的关系，而是自己实现，需要实现在faq的查询、列表、编辑界面中，category字段取值的下拉实现（默认生成的代码为输入框）；
编辑界面
打开faq的index.vue代码，首先拉到下面js代码部分，建立关联数据的模型；需要先导入category表数据的查询方法：
import { listCategory } from "@/api/tree/category";
建立下拉框的数据模型：
data(){
return {
//.....
// 这里的定义下拉框模型
fields:[],
//.....
}
}
填充下拉框模型数据（查询方法中，默认取第一页的10条数据，如果要取更多数据，需要传递参数pageSize）：
methods:{
getList() {
// .....
// 在getList里面添加模型数据获取代码，调用导入的listCategory方法
listCategory({}).then(response=> {
this.fields=response.rows;
});
}
}
然后，修改 编辑界面的category字段代码，将输入框改为下拉框：
<el-form-item label="所属分类" prop="category">
<!-- <el-input v-model="form.category" placeholder="请输入所属分类" /> -->
<el-select v-model="form.category" placeholder="请选择">
<el-option
v-for="item in fields"
:key="item.id"
:label="item.title"
:value="item.id"
>
{{ item.title }}
</el-option>
</el-select>
</el-form-item>
查询界面
其修改方法和上面的编辑界面一样，只需要将查询字段的输入框控件替换为下拉框即可，前面的代码基础已经完成，直接替换控件
<el-form-item label="所属分类" prop="category">
<!-- <el-input
v-model="queryParams.category"
placeholder="请输入所属分类"
clearable
@keyup.enter.native="handleQuery"
/> -->
<el-select v-model="queryParams.category" placeholder="请选择">
<el-option
v-for="item in fields"
:key="item.id"
:label="item.title"
:value="item.id"
clearable
>
{{ item.title }}
</el-option>
</el-select>
</el-form-item>
列表界面
上面两个都是编辑界面，将输入框替换为下拉框即可，而数据列表页面的只读数据，category字段默认还是展示关联的ID值，可读性差，也需要替换，这里使用el-table-column控件的格式化方法，新增一个:formater属性，并在格式化方法中实现内容的替换。
首先定义格式化方法，这里重用了前面获取的category列表数据，然后过滤出category对应的 信息：
methods:{
// 格式化分类为名称
categoryFormat(row){
const category = this.fields.find(filed => filed.id===row.category);
return category==='undefined'?'undefined':category.title;
},
}
然后，在列表界面的代码中，给category字段添加格式化方法：
<el-table-column label="所属分类" align="center" prop="category" :formatter="categoryFormat" />
