vue 定义全局本地常量

应用：表格搜索及表格写入

新建全局本地常量locals.js

export default {
/**
   * 供应商 - 邀请记录 - 邀请状态
   * @param Object invitationStatus 运单状态 - 回写
   * @param Object invitationStatusArr 运单状态 - 遍历
   */
  invitationStatus: {
    '1': '待加入',
    '2': '已加入',
    '3': '已过期'
  },
  invitationStatusArr: [
    {
      label: '待加入',
      value: '1'
    },
    {
      label: '已加入',
      value: '2'
    },
    {
      label: '已过期',
      value: '3'
    }
  ],
  /**
   * 供应商 - 邀请记录 - 经销级别
   * @param Object distributionLevel 运单状态 - 回写
   * @param Object distributionLevelArr 运单状态 - 遍历
   */
  distributionLevel: {
    '0': '省级',
    '1': '市级',
    '2': '县级'
  },
  distributionLevelArr: [
    {
      label: '省级',
      value: '0'
    },
    {
      label: '市级',
      value: '1'
    },
    {
      label: '县级',
      value: '2'
    }
  ] }

在项目main.js里引入并添加到vue原型链上

搜索遍历

<span>邀请状态:</span>
<el-select v-model="search.status" placeholder="请选择">
   <el-option label="全部" value="0"></el-option>
   <el-option
    v-for="(item, index) in $locals.invitationStatusArr"
    :key="index"
    :label="item.label"
    :value="item.value">
   </el-option>
</el-select>

表格回写

<el-table-column label="邀请状态" align="center" show-overflow-tooltip min-width="120" :render-header="elTableHeadEllipsis">
  <template slot-scope="scope">
     <span>{{ $locals.invitationStatus[`${scope.row.status}`] }}</span>
  </template>
</el-table-column>