基于若依前后端分离的字典使用_若依 vue 前后端分离 字典使用

问题再现：Property or method "dict" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

vue.runtime.esm.js:1888  TypeError: Cannot read properties of undefined (reading 'type')

1、在export default中定义

dicts:['cell_state','cell_disabled_reason'],

2、 搜索框使用/弹出框

<el-form-item label="状态" prop="state">
  <el-select
    v-model="queryParams.state"
    placeholder="请选择状态"
    clearable
    style="width: 240px"
  >
    <el-option
      v-for="dict in dict.type.cell_state"
      :key="dict.value"
      :label="dict.label"
      :value="dict.value"
    />
  </el-select>
</el-form-item>

3、表格中使用

<el-table-column label="状态" align="center" prop="state">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.cell_state" :value="scope.row.state"/>
  </template>
</el-table-column>

※美化：字典状态样式如果需要有框框的，如下，需要修改字典数据的回显样式