1、前端下拉框使用字典：

<el-col :span="12">
            <el-form-item label="性别" prop="xb">
              <el-select
                v-model="formData.xb"
                placeholder="请选择性别"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

2、表格的值展示字典值

      <el-table-column label="性别" align="center" prop="xb" width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.xb" />
        </template>
      </el-table-column>

3、后端其实可以在返回的时候直接调

但注意使用场景是数据仅拿来做页面展示，如若是修改页面调此接口就不适合

可以直接转字典再返给前端：

person.setSex(dictDataService.selectDictLabel("sys_ddc_sex", v.getColour()));

4、在SQL里面就关联字典表给转了