自定义表单

50 阅读1分钟
 <section class="statistics-filter-wrapper">
      <div class="filter-item">
        <label>列车:</label>
        <el-select v-model="train">
          <el-option v-for="(item, index) of trainList" :key="index" :value="item.value" :label="item.label" />
        </el-select>
      </div>
      <div class="filter-item">
        <label>工班:</label>
        <el-select v-model="department">
          <el-option v-for="item of departmentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
      <div class="filter-item">
        <label>人员:</label>
        <el-select v-model="person">
          <el-option v-for="(item, index) of personList" :key="index" :value="item.value" :label="item.label" />
        </el-select>
      </div>
      <div class="filter-item">
        <label>日期:</label>
        <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd" />
      </div>
      <div class="filter-operation">
        <el-button type="primary" @click="fetchFaultList">
          查询
        </el-button>
      </div>
    </section>
.statistics-filter-wrapper {
      display: flex;
      border-bottom: 1px solid #f0f0f0;
      padding: 20px;
      align-items: center;

      .filter-item {
        display: flex;
        align-items: center;
        margin-right: 20px;

        label {
          display: inline-block;
          white-space: nowrap;
        }
      }
}

image.png