Vue+Element 将常用的数据字典封装成配置文件

将常用的数据字典封装成配置文件(devicetype.js)，代码如下：

// 数据显示时使用
export const deviceType = {
    1: "北京",
    2: "上海",
    3: "广州",
    4: "深圳",
    5: "杭州",
    6: "武汉",
    7: "郑州",
}

// 数据搜索传参时使用
export const deviceSearch =
    [{
        label: '北京',
        value: 1
    }, {
        label: '上海',
        value: 2
    }, {
        label: '广州',
        value: 3
    }, {
        label: '深圳',
        value: 4
    }, {
        label: '杭州',
        value: 5
    }, {
        label: '武汉',
        value: 6
    }, {
        label: '郑州',
        value: 7
    }]

使用方法：

<template>
  <!-- 搜索 -->
  <el-form :inline="true" :model="host_form" size="small">
    <el-form-item label="主机名称" prop="host">
      <el-input v-model="host_form.host" placeholder="请输入主机名称"></el-input>
    </el-form-item>
    <el-form-item label="主机类型" prop="devicetype">
      <el-select v-model="host_form.devicetype" placeholder="请选择主机类型">
        <el-option v-for="item in deviceSearch" :label="item.label" :value="item.value" :key="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <!-- table列表 -->
  <el-table
    :data="TableData"
    ref="refHost"
    row-key="id"
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      width="55"
      :reserve-selection="true"
    >
    </el-table-column>
    <el-table-column prop="host" label="主机名称"> </el-table-column>
    <el-table-column prop="devicetype" label="设备类型">
      <template slot-scope="scope">
        {{ device[scope.row.devicetype] }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { deviceType, deviceSearch } from "@/config/devicetype";
export default {
  data() {
    return {
      device: deviceType,
      deviceSearch: deviceSearch,

      host_form: {
        host: "",
        devicetype: "",
      },

      TableData: []
    }
  }
}
</script>

项目大致结构如下：