searchTable.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!-- 搜索表单 -->
  2. <template>
  3. <el-form
  4. label-width="100px"
  5. class="ele-form-search"
  6. @keyup.enter.native="search"
  7. @submit.native.prevent
  8. >
  9. <el-row :gutter="15">
  10. <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  11. <el-form-item label="编码:" prop="code">
  12. <el-input
  13. clearable
  14. placeholder="请输入"
  15. v-model.trim="params.code"
  16. ></el-input>
  17. </el-form-item>
  18. </el-col> -->
  19. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  20. <el-form-item label="编码:" prop="code">
  21. <el-input
  22. clearable
  23. placeholder="请输入"
  24. v-model.trim="params.code"
  25. ></el-input>
  26. </el-form-item>
  27. </el-col>
  28. <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
  29. <el-form-item label="名称" prop="name">
  30. <el-input
  31. clearable
  32. placeholder="请输入"
  33. v-model.trim="params.name"
  34. ></el-input>
  35. </el-form-item>
  36. </el-col>
  37. <el-col style="display: flex;justify-content: end" v-bind="styleResponsive ? { lg:6, md: 6 } : { span:6 }">
  38. <div class="ele-form-actions">
  39. <el-button
  40. type="primary"
  41. icon="el-icon-search"
  42. class="ele-btn-icon"
  43. @click="search"
  44. >
  45. 查询
  46. </el-button>
  47. <el-button @click="reset">重置</el-button>
  48. </div>
  49. </el-col>
  50. </el-row>
  51. </el-form>
  52. </template>
  53. <script>
  54. export default {
  55. data () {
  56. // 默认表单数据
  57. const defaultParams = {
  58. code:'',
  59. name:'',
  60. };
  61. return {
  62. defaultParams,
  63. // 表单数据
  64. params: { ...defaultParams }
  65. };
  66. },
  67. computed: {
  68. // 是否开启响应式布局
  69. styleResponsive () {
  70. return this.$store.state.theme.styleResponsive;
  71. }
  72. },
  73. methods: {
  74. search () {
  75. this.$emit('search', {
  76. ...this.params
  77. });
  78. },
  79. /* 重置 */
  80. reset () {
  81. this.createTime=[]
  82. this.params = Object.assign({},{ ...this.defaultParams });
  83. this.search();
  84. }
  85. }
  86. };
  87. </script>