search.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <fieldset>
  3. <legend>
  4. <el-tag type="info">条件筛选</el-tag>
  5. </legend>
  6. <el-form class="lv-form-inline" ref="searchForm" :model="searchKey" label-position="right" label-width="100px">
  7. <div class="search-form">
  8. <div class="form-left">
  9. <el-row :gutter="10">
  10. <el-col :span="this.$store.state.global.ismobile?12:4">
  11. <el-input v-model="searchKey.name" placeholder="名称" clearable :style="{ width: '100%' }" @keyup.enter="searchForm()">
  12. <template #prepend>名称</template>
  13. </el-input>
  14. </el-col>
  15. <el-col :span="this.$store.state.global.ismobile?12:4">
  16. <el-select v-model="searchKey.status" clearable placeholder="请选择状态" @change="searchForm" :style="{width: '100%'}" class="diy-select">
  17. <el-option :value="2" label="正常"></el-option>
  18. <el-option :value="1" label="已禁用"></el-option>
  19. <template #prefix>状态</template>
  20. </el-select>
  21. </el-col>
  22. <el-col :span="this.$store.state.global.ismobile?12:4">
  23. <el-date-picker v-model="searchKey.create" :style="{width: '100%'}" placeholder="请选择创建时间" start-placeholder="开始时间" end-placeholder="结束时间" type="daterange" range-separator="至" @change="searchForm" />
  24. </el-col>
  25. </el-row>
  26. </div>
  27. <div class="form-line"></div>
  28. <div class="form-right">
  29. <el-button type="primary" icon="el-icon-search" @click="searchForm">搜索</el-button>
  30. </div>
  31. </div>
  32. </el-form>
  33. </fieldset>
  34. </template>
  35. <script>
  36. export default {
  37. data(){
  38. return {
  39. searchKey:{}
  40. }
  41. },
  42. methods: {
  43. searchForm(){
  44. this.$emit("success",this.searchKey);
  45. }
  46. }
  47. }
  48. </script>