前端开发实习之数据字典那些事

字典顾名思义，前后端所约定的对某个字段的定义规则，比如0是女生，1是男生。应用场景在展示table的时候，常常会有这样的字段：状态，性别，或是项目某种特定的字段。这时候前端拿到的数据就会是 sex：1。而不是sex：男。这时候就需要前端进行转换处理并展示出来。主要思路其实字典就是定义一个对象，key就是值*（1,2…），value就是内容。然后写成一个方法，在插槽中调用方法对应的值，方法retur

穿西装的水獭

6326人浏览 · 2020-11-01 22:24:50

穿西装的水獭 · 2020-11-01 22:24:50 发布

字典

顾名思义，前后端所约定的对某个字段的定义规则，比如0是女生，1是男生。

应用场景

在展示table的时候，常常会有这样的字段：状态，性别，或是项目某种特定的字段。这时候前端拿到的数据就会是 sex：1。而不是sex：男。这时候就需要前端进行转换处理并展示出来。

主要思路

其实字典就是定义一个对象，key就是值*（1,2…），value就是内容。然后写成一个方法，在插槽中调用方法对应的值，方法return出对应的内容并渲染。
思路很简单，刚开始做的时候我每个页面都写对应的字典，因为项目设计的table众多，导致代码量的极大冗余。

封装成公共的

直接代码了

首先就是建一个common文件夹，一般放在src下面。

const sexMap={
    '1':{name:'男',color:'#ccc'},
    '2':{name:'女',color:'#fff9'}
}
const characterMap={
    '1':{name:'暴躁',color:'#F56C6C'},
    '2':{name:'温和',color:'#67C23A'}
}
export {
    sexMap,characterMap
}

这里要注意的是抛出对象的时候如果只有一个是不能直接export出来的，需要export defalut。

在页面汇总进行引入，一定一定一定记得注册，如果抛出的是对象就在data中注册，如果写的是方法一定要在method中注册

<template>
  <div class="app-container">
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
      <el-table-column
      label="性格"
      width="120">
      <template slot-scope="scope">
      <div v-if="scope.row.character" :style="{color:characterMap[scope.row.character].color}">
      {{ characterMap[scope.row.character].name}}
      </div>
      </template>  
   </el-table-column>
      </el-table>
  </div>
</template>

<script>
import {sexMap,characterMap} from '@/common/index'
export default {
  data() {
    return {
        sexMap,
          characterMap,
            tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            character:'1',
          }, {
            date: '2016-05-04',
            name: '王小虎',
            character:'2',
          }, {
            date: '2016-05-01',
            name: '王小虎',
            character:'2',
          }, {
            date: '2016-05-03',
            name: '王小虎',
             character:'1',
          }]
          }
  },
  created() {
   
  },
  methods: {

  }
}
</script>