页面样式框架基于element-ui

vue的html部分

      <div style='width:80%;' class="pull-left">
        <el-input placeholder="请输入搜索条件" style="width:300px"
          class="filter-item" v-model="word" clearable>
          <el-select v-model="keyOption" slot='prepend'
            style="width:120px;" placeholder="请选择条件">
            <el-option v-for="item in keyOptions" :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-input>
        <el-select v-model="keywords.switchs" clearable slot="append" 
          class="filter-item" placeholder="状态" style="width:100px;">
          <el-option v-for="item in statusOptions" :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="filter-item" style="margin-left:20px;" 
          type="primary" icon="search" @click="search">
          搜索
        </el-button>
      </div>

vue的js部分

data(){
  return{
    keyOption: 'popCode',//默认下拉框的选项,key值
      word: '',// 搜索框的值
      keyOptions: [// 下拉
        {
          label: '推广码',
          value: 'popCode'
        }, {
          label: '推广者手机号',
          value: 'promoterSonId'
        }],
      statusOptions: [{
        label: '全部',
        value: ''
      }, {
        label: '开启',
        value: 'Y'
      }, {
        label: '关闭',
        value: 'N'
      }],
    }
},
methods:{
fetchTableData() {// 获取所有数据
      this.keywords.promoterId = this.promoterId
      getlistPopHistory(this.keywords).then(res => {
        this.loading = false
        this.resData = res.data
        this.totalCount = res.data.totalCount
        this.tableData = res.data.records
        this.handleData(this.tableData)
      }).catch(error => {
        this.loading = false
        console.log('error==' + error)
      })
    },
  search() {
      for (const item of this.keyOptions) {
        for (const key in this.keywords) { // 提交属性
          // 存在于下拉框和提交属性,且不是当前选择
          if (key === item.value && key !== this.keyOption) {
            this.keywords[key] = ''
          }
        }
      }
      if (this.keyOption) {
        this.keywords[this.keyOption] = this.word
      }
      this.fetchTableData()// 执行一遍获取数据的代码
    },
}

页面的css部分

.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

`