首先,进入字典管理中添加一个字典类型:

之后添加几个字典值:

在前端代码中,先引入字典:

export default {
  name: "Room",
  dicts: ['room_chat_type'], // 添加此处代码
  data() {
    return {
      // 遮罩层
      loading: true,
      },
   ...
  }
}

修改表格使用,用于数据回显:

<el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="记录ID" align="center" prop="id" />
      <el-table-column label="用户ID" align="center" prop="userId" />
        <template slot-scope="scope">
          <dict-tag :options="dict.type.room_chat_type" :value="scope.row.type"/>
        </template>
      </el-table-column>
</el-table>

Logo

快速构建 Web 应用程序

更多推荐