[JavaScript知识库]vue后台 select的查询条件太多，封装到一个js文件中

前言

今天还是继续在写vue后台
但是遇到select条件太多的情况
一个页面还有多个select
都写在data里就会显得代码臃肿
然后就想着把这些条件移出去

思路

想法很简单
就新建一个js文件
然后定义一个常量对象
把这些查询条件都放到常量里去
最后再导出就行
页面中去import导入一下这个常量就行

代码

common/index.js

const options = {
  // 支部查询
  branchOptions: [{
    value: '0',
    label: '全部支部'
  }, {
    value: '1',
    label: '数媒支部'
  }, {
    value: '2',
    label: '计科支部'
  }, {
    value: '3',
    label: '软工支部'
  }],

  // 班级查询
  classOptions: [{
    value: '0',
    label: '全部班级'
  }, {
    value: '1',
    label: '数媒201'
  }, {
    value: '2',
    label: '数媒202'
  }, {
    value: '3',
    label: '数媒203'
  }],

}

export default options

页面

<template>
  <!-- 卡片视图区域 -->
  <el-card>
    <!-- 搜索与添加区域 -->
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
      <el-col :span="2">
        <!-- <download-excel :data="departmentList" :fields="json_fields" name="xixixi.xls"> -->
        <el-button type="success" icon="el-icon-download">批量导入</el-button>
        <!-- </download-excel> -->
      </el-col>
      <el-col :span="9">
        <el-button type="primary" icon="el-icon-plus">下载模板</el-button>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchForm.branchValue" placeholder="全部支部">
          <el-option v-for="item in options.branchOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="searchForm.classValue" placeholder="全部班级">
          <el-option v-for="item in options.classOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-input v-model="searchinput" placeholder="姓名"></el-input>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import options from '@/common/index.js'
  export default {
    data() {
      return {
        options, // 一定要在这里再注册一下！！！
        // 搜索条件
        searchForm: {
          // 支部查询
          branchValue: '全部支部',
          // 班级查询
          classValue: '全部班级',
        },
      }
    }
  }
</script>

<style>

</style>

踩坑

看着非常丝滑的操作
还是踩坑了
因为在data里没有注册一下options
一直引入不进来
所以这步真的很重要
记录一下~