【前端字典使用】derderder

业务背景

在上传设备信息的时候 需要上传到 是否处于开启状态
后端让我返回 0 和 1 0代表未开启，1代表开启

创建字典

• 手动创建

  let dict = [
  	{label:'开启',value:1},
  	{label:'未开启',value:0}
  ]
  
  

• 当然如果可以的话还可以让后端帮你写个储存字典和查看的接口

搭配 element的 选择器 和 表格使用

• 选择器

 <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in dict"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

• 表格 （后端返回给我们的就是个0 或者 1）

<el-table-column
	 align="center"
     label="设备类型">
     // 插槽
    <template v-slot="{row}">
    // 这里正好对应的 0 的value就是 数组第0项  写法上偷个懒 
      {{dict[row.deviceType].label}}
    </template>
  </el-table-column>

🚀🚀🚀🚀拜拜🚀🚀🚀🚀