el-select 选择器前后端基础用法

2024开年上工第一天，记录一下

作为一个后端开发人员对前端的bug真的是有点头大。

今日bug是el-select的下拉选择框数据没有传到后台，返回数据不正确。

组件 | Element官方文档中只给了当前组件的一个简介，没有具体到实践中传后端并返回数据，还是自己解决，特此记录一下。

 

官方文档中v-model="value",以至于查询传参时无法识别value，正确做法是

v-model="searchModel.state"

<el-form
    :model="searchModel" ref="searchForm" label-width="80px"  :inline="true"  size="small" >
    <el-form-item>
    <el-input v-model="searchModel.Code" placeholder="编码"/>
    </el-form-item>
    <el-form-item>
    <el-input v-model="searchModel.name" placeholder="姓名"/>
    </el-form-item>
    <el-form-item>
    <el-select v-model="searchModel.state" placeholder="状态">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
    <el-button icon="el-icon-refresh-right" @click="resetValue" >重置</el-button>
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
    </el-form-item>
    </el-form>

 options是选择框中下拉选项，而searchModel是我们的查询条件

   options: [{
              value: '0',
          label: '安装中'
        }, {
          value: '1',
          label: '缴费中'
        }, {
          value: '2',
          label: '完成'
        }],
        value: '',

            //查询条件
           searchModel: {
            Code: '',
            name: '',
            state: '',
            pageNo:1,
            pageSize:10,
            userId:this.$store.getters.userId //用户ID
            }

去岁千般皆如意，今年万事皆称心，代码需要我们细心细心再细心，开工大吉，接着搬砖！！！