Vue + TypeScript + ElementUI 封装表头查询组件
前段时间有朋友私信我 Vue + TypeScript 的问题,然后就打算写一篇 Vue + TypeScript 封装组件的文章
正好公司项目中需要封装一个表头查询组件,就拿出来分享一下~
组件的整体思路是通过一个 config 数组生成列表的头部表单:
PS:配合《Vue 爬坑之路(九)—— 用正确的姿势封装组件》食用更佳
一、组件设计
这个组件由两部分组成:输入组件和按钮
其中输入组件可以通过 v-for 循环渲染,并通过 v-if 来切换输入框 input 和下拉框 select
每个输入组件都有各自的 v-model,可以在 config 传入对应的 code 来绑定对应的参数
基于这些想法,组件的基本结构就出来了:
由此可以设计出 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[]
}
二、内部逻辑
整个组件需要传入两个必选参数:config 和 data
data 是整个表头的数据对象,config 就是整个组件的配置项,由此渲染出头部结构
然后还有“查询”和“清空”两个按钮
这类公共组件不建议直接处理事件,所以通过 emit 将事件抛给父组件处理
这里的 this._copy 是 data 的拷贝对象,在 mounted 的时候将 data 拷贝出来作为初始值,清空的时候再将这个初始值传回去
这里会涉及到在子组件中对父组件传入的参数直接修改,所以需要用 sync 修饰符
三、完整代码
除了这些基本逻辑之外,我还添加了一个 size 用于控制整体的尺寸,然后基于自身的项目微调了样式,所以这部分仅做参考
<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>
父组件调用:
Vue + TypeScript + ElementUI 封装表头查询组件的更多相关文章
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- 八、vue使用element-ui组件
element-ui组件 1.引入element import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element- ...
- 应用五:Vue之ElementUI 表格Table与分页Pagination组件化
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...
- 基于ElementUI封装Excel数据导入组件
由于前端项目使用的是Vue-cli3.0 + TypeScript的架构,所以该组件也是基于ts语法封装的,组件的完整代码如下: <template> <div id="m ...
- vue自定义插件封装,实现简易的elementUi的Message和MessageBox
vue自定义插件封装示例 1.实现message插件封装(类似简易版的elementUi的message) message组件 <template> <transition ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)
vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...
- 利用element-ui封装地址输入的组件
我们前端做项目时,难免会遇到地址输入,多数情况下,我们都是提供一个省市三级联动,加上具体地址输入的Input输入框给用户,用以获取用户需要输入的真实地址.在需要对用户输入的数据进行校验的时候,我们会单 ...
随机推荐
- haproxy prometheus 监控docker-compose 运行试用
haproxy prometheus 的监控metrics 使用的是exporter ,因为haproxy 对于状态统计报告处理的 比较好,我们可以了stats 同时支持一个csv的api 接口,所以 ...
- Benthos metrcis 说明
Benthos 按照input, pipeline ,buffer,conditions,ouput 这个几个大类,为我们提供了 方便的分析metrics,支持json 格式同时可以暴露为 stats ...
- Lua 程序设计 (Roberto,Ierusalimschy 著)
1 开始 2 类型与值 3 表达式 4 语句 5 函数 6 深入函数 7 迭代器与泛型for 8 编译,执行与错误 9 协同程序(coroutine) 10 完整的示例 11 数据结构 12 数据文件 ...
- python 调试之assert and logging
断言 assert assert后面跟的表达式应该是True,否则,根据程序运行的逻辑,后面的代码肯定会出错. 如果断言失败,会抛出AssertionError def foo(s): n = int ...
- KVM部署、使用、调优
背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高 云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...
- 原码,反码与补码的概念以及Java中数的存储方式
*原码,反码,补码必须满8位,不足在前填0: 1,原码:用符号位和数值位表示一个带符号的数 + -> 0 - -> 1 表示数的范围-127~ ...
- Dynamic Signals and Slots
Ref https://doc.qt.io/archives/qq/qq16-dynamicqobject.html Trolltech | Documentation | Qt Quarterly ...
- 自定义flume的hbase sink 的序列化程序
package com.hello.hbase; import java.nio.charset.Charset; import java.text.SimpleDateFormat; import ...
- python装饰器学习笔记
定义:本质上就是个函数,(装饰器其他函数)就是为了给其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 #-*-coding:utf-8-*- 1 imp ...
- Executor与ExecutorService
ExecutorService 接口继承了 Executor 接口,是 Executor 的子接口. Executor 接口定义了 execute()方法用来接收一个Runnable接口的对象,而 E ...