vue+typescript封装简单查询组件

Dear 丶 2023-03-01 13:27 22阅读 0赞

**组件的整体思路是通过一个 config 数组生成列表的头部表单：**

**设计出 config 的数据结构 data.ts**

/*
     * data.ts
     *
     * 数据类型 - table-header 组件
     */
    
    export class SelectOptionItem { 
      public value: String | Number;
      public label: String | Number;
    }
    
    export class HeaderConfigItem { 
      public title: String;
      public code: String;
      public type?: 'select' | 'input';
      public options?: SelectOptionItem[]
    }

**完整代码**

<template>
      <div class="table-header">
        <el-form :inline="true" :model="data" class="form--label-left" label-width="180px">
          <el-row :gutter="20">
            <el-col :span="8" v-for="item in config" :key="item.code">
              <el-form-item :label="item.title" class="table-header-item">
                <el-select v-if="item.type === 'select'" v-model="data[item.code]" :placeholder="`请输入${ item.title}`" :size="size" clearable>
                  <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label"></el-option>
                </el-select>
                <el-input v-else v-model="data[item.code]" :placeholder="`请输入${ item.title}`" :size="size"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="table-header_button">
              <el-button :size="size" type="text" @click="reset">清空</el-button>
              <el-button :size="size" type="primary" icon="el-icon-search" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
    
    <script lang="ts">
      import {  Component, Prop, Vue } from 'vue-property-decorator';
      import {  HeaderConfigItem } from "./data.ts";
    
      @Component({ })
      export default class TableHeader extends Vue { 
        public _copy: Object = { }
        @Prop({  default: function () { 
            return 'small'
          }})
        size: 'small' | 'mini' | 'medium'
    
        @Prop({ })
        data: Object
    
        @Prop({ default: []})
        config: HeaderConfigItem[]
    
        mounted() { 
          this._copy = Object.assign({ }, this.data)
        }
        // 查询
        search() { 
          this.$emit('search', this.data)
        }
        // 清空
        reset() { 
          this.$emit('update:data', Object.assign({ }, this._copy))
          this.search()
        }
      }
    </script>
    
    <style lang="scss">
    .table-header { 
      padding-top: 10px;
      .table-header_button { 
        text-align: right;
        float: right;
        margin-bottom: 12px;
        line-height: 40px;
      }
      .table-header-item.el-form-item { 
        width: 100%;
        display: flex;
        flex: auto;
        margin-bottom: 12px;
        .el-form-item__content, .el-select { 
          width: 100%;
        }
      }
    }
    
    </style>

**父组件调用：**

<table-header @search="getFilterList" :config="tableHeaderConfig" :data.sync="filterData"></table-header>

**父组件传入tableHeaderConfig参数就可以了**

public tableHeaderConfig: HeaderConfigItem[] = [
        {  title: '产品编号', code: 'productId' },
        { 
          title: '会员服务周期',
          code: 'auth',
          type: 'select',
          options: [
            {  value: 0, label: '未到期' },
            {  value: 1, label: '已到期' },
          ],
        },
      ]

**整个组件需要传入两个必选参数：config 和 data  
data 是整个表头的数据对象，config 就是整个组件的配置项，由此渲染出头部结构  
这里的 this.\_copy 是 data 的拷贝对象，在 mounted 的时候将 data 拷贝出来作为初始值，清空的时候再将这个初始值传回去  
这里会涉及到在子组件中对父组件传入的参数直接修改，所以需要用 sync 修饰符**

public _copy: Object = { }

mounted() { 
          this._copy = Object.assign({ }, this.data)
        }