前端开发帮助文档

搜索

说明：


1、直接复制搜索群组，不需要的可以删除
2、搜索按钮样式 - 搜索按钮的外层div添加不同的class类名来外部按钮位置

        btnFloatLeft -- 居左
        
        btnFloatRight -- 居右
        
        btnFloatCenter -- 居中
        
3、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左


<div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="searchTimeDiv">
          <el-date-picker
            v-model="searchTime"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4">
        <el-select v-model="searchSelect" placeholder="请选择" size="small">
          <el-option
            v-for="item in optionsSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          size="small"
          placeholder="请输入标题"
          prefix-icon="el-icon-search"
          v-model="searchInputTitle">
        </el-input>
      </el-col>
      <el-col :span="4">
        <div class="btnFloatRight">
          <el-button type="primary" size="small">查询</el-button>
        </div>
      </el-col>
    </el-row>
</div>

export default {
  data() {
    return {
      searchTime: '', // 时间选择
      searchSelect: '', // 下拉框
      optionsSelect: [ // 下拉框选项
        {
          value: '0',
          label: '下拉选项1'
        },
        {
          value: '1',
          label: '下拉选项2'
        },
        {
          value: '2',
          label: '下拉选项3'
        }
      ],
      searchInputTitle: '' // 带icon的搜索框
    }
  }
}

<style scoped>
   .searchTimeDiv >>> div{
     width: 100%;
   }
   .btnFloatCenter{
     width: 100%;
     text-align: center;
   }
   .btnFloatLeft{
     width: 100%;
     text-align: left;
   }
   .btnFloatRight{
     width: 100%;
     text-align: right;
   }
 </style>

← 表格 →