前端开发帮助文档

搜索群组

说明：

1、搜索模块之间的上下间距，通过class类名为searchBoxList控制，改变其margin-top来改变上下间距，默认为10
2、搜索框前面的文字描述最多为4个字符
3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左
4、使用clearable属性即可得到一个可清空的输入框
5、可清空的输入框，在清空之后会出现绑定的值为 null
6、可在输入框上添加change事件，在事件中判断 如果值 === null 则重新赋值成你需要的结果

<div class="searchGroup_list" style="padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;">
  <el-row :gutter="20">
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">项目编号: </span>
          </el-col>
          <el-col :span="18">
            <el-input size="small" v-model="input1" placeholder="请输入项目编号"></el-input>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">项目名称: </span>
          </el-col>
          <el-col :span="18">
            <el-input size="small" @focus="changeSearchListName" v-model="input2" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">立项人: </span>
          </el-col>
          <el-col :span="18">
            <el-input size="small" v-model="input3" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">跟踪人: </span>
          </el-col>
          <el-col :span="18">
            <el-input size="small" v-model="input4" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">开始日期: </span>
          </el-col>
          <el-col :span="18">
            <div class="searchTime" style="width: 100%">
              <el-date-picker
                size="small"
                v-model="input5"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">结束日期: </span>
          </el-col>
          <el-col :span="18">
            <div class="searchTime" style="width: 100%">
              <el-date-picker
                size="small"
                v-model="input6"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div class="searchBoxList">
        <el-row>
          <el-col :span="6">
            <span class="searchListName">项目类型: </span>
          </el-col>
          <el-col :span="18">
            <el-select v-model="input7" placeholder="请选择" size="small">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :sm="6" :xl="4">
      <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
        <el-button type="primary" size="mini">搜索</el-button>
      </div>
    </el-col>
  </el-row>
</div>

export default {
  name: 'searchGroup',
  data() {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      options1: [{
        value: '0',
        label: '项目类型1'
      }, {
        value: '1',
        label: '项目类型2'
      }, {
        value: '2',
        label: '项目类型3'
      }],
      options2: [{
        value: '0',
        label: '开始'
      }, {
        value: '1',
        label: '未开始'
      }]
    }
  },
  methods: {
    changeSearchListName() {
      this.dialogTableVisible = true
    }
  }
}

<style scoped>
  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchTime{
    width: 100%;
  }
  .searchTime > div{
    width: 100%;
  }
</style>

← 搜索 →