若依Vue表关联字段的下拉实现

假设表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" />

完工！