对element-ui的table组件的二次封装
首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候更加简单方便。
这里只是简单的封装,同学们若是感兴趣可以加以完善,若有问题可以一起讨论。
//封装的table组件
<template>
<!-- 列表 -->
<el-table
stripe
:border="border"
:data="dataSource"
@selection-change="handleSelectionChange"
v-loading="listLoading"
@row-dblclick="rowClick"
highlight-current-row
@row-click="clickTable"
ref="refTable"
@expand-change="expandChange"
>
<!--数据源-->
<el-table-column
v-for="(column, index) in columns"
header-align="center"
v-if="column.isShow"
:sortable="column.hasSort"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:align="column.align"
:width="column.width">
</el-table-column >
</el-table>
</template>
<script>
export default {
name:"tables",
props:{
dataSource: {// 表格数据源 默认为空数组
type: Array,
default: ()=> []
},
columns: {// 表格的字段展示 默认为空数组
type: Array,
default: ()=>[]
}
},
components: {
//
},
watch:{
//
},
mounted(){
//
},
methods: {
//
}
}
</script>
<style lang="scss">
//
</style>
封装完成后怎么调用这个组件呢?
//调用封装好的table组件
<template>
//这里仅传入列表数据和表头数据,如有其它需求可以增加传递参数
<tables :dataSource="dataSource" :columns="columns"></tables>
</template>
<script>
import tables from './table.vue' //引入组件
export default {
data() {
return {
dataSource:[{
'createTime':123,
'times':123,
'username':'jj',
'deptName':'ii',
'status':'0',
},{
'createTime':123,
'times':123,
'username':'jj',
'deptName':'ii',
'status':'0',
},{
'createTime':123,
'times':123,
'username':'jj',
'deptName':'ii',
'status':'0',
}],
columns:[{
hasSort: false, //<Boolean> 是否排序
isShow: true, //<Boolean> 是否展示
prop: 'createTime', //<String> 对应属性名
label: '日期', //<String> 表头标签
align: 'center',//表头内容是否居中
width: 200, // 列宽
},{
hasSort: false, //<Boolean> 是否排序
isShow: true, //<Boolean> 是否展示
prop: 'times', //<String> 对应属性名
label: '时间', //<String> 表头标签
align: 'center'//表头内容是否居中
},{
hasSort: true, //<Boolean> 是否排序
isShow: true, //<Boolean> 是否展示
prop: 'username', //<String> 对应属性名
label: '名字', //<String> 表头标签
align: 'center'//表头内容是否居中
},{
hasSort: true, //<Boolean> 是否排序
isShow: true, //<Boolean> 是否展示
prop: 'deptName', //<String> 对应属性名
label: '部门名称', //<String> 表头标签
align: 'center'//表头内容是否居中
},{
hasSort: true, //<Boolean> 是否排序
isShow: true, //<Boolean> 是否展示
prop: 'status', //<String> 对应属性名
label: '状态', //<String> 表头标签
align: 'center'//表头内容是否居中
}
]
}
},
components: {
tables,//注册table组件
},
watch:{
//
},
mounted(){
//
},
methods: {
//
}
}
</script>
<style lang="scss">
//
</style>
下面是我的公众号二维码,欢迎同学们关注,大家一起学习,一起进步。
对element-ui的table组件的二次封装的更多相关文章
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- Vue+element UI实现分页组件
介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...
- vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 09 - Vue3 UI Framework - Table 组件
接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- Bootstrap Blazor Table 组件(二)
原文链接:https://www.cnblogs.com/ysmc/p/16128206.html 很多小伙伴在使用 Bootstrap Blazor Table组件的时候,都会有这样的一个需求: 我 ...
- 基于bootstrap table配置的二次封装
准备 jQuery js css 引用完毕 开始 如果对bootstrap table 的方法与事件不熟悉: Bootstrap table方法,Bootstrap table事件 <table ...
随机推荐
- Spring中NESTED和REQUIRED_NEW传播行为的区别
简介 PROPAGATION_REQUIRED_NEW: 表示当前方法必须运行在它自己的事务中.一个新的事务将被启动.如果存在当前事务,在该方法执行期间,当前事务会被挂起.如果使用JTATransac ...
- jar包冲突时怎么办
因为项目中会依赖许多jar包,免不得就会有冲突,那怎么解决呢? 使用 mvn dependency:tree 可以看到各个包的依赖关系 [INFO] | +- commons-cli:commons- ...
- Ubuntu安装 php + apache + mysql
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.安装SSH(必须) sudo apt-get install ssh 2.安装MySQL(虽然现在最新版为5.1,但 ...
- 可能用得上的UI控件
为了便于开发者打造各式各样的优秀App,UIKit框架提供了非常多功能强大又易用的UI控件以下列举一些在开发中可能用得上的UI控件: 红色表明最常用,蓝色代表一般,黑色代表几乎不用(这不是绝对的, ...
- php程序员经验
PHP 学习计划流程2008-10-22 17:23PHP 学习计划流程1.看教程 (2-3月)大概1天1个章节,比如<PHP圣经>有32章,1个多月就看完了,当然后面的章节每章1天肯定看 ...
- 内部类&异常
/* 内部类 内部类类别: 成员内部类: 在一个类的成员位置定义另外一个类,那么另外 一个 类就称作为成员内部类. 成员内部类的访问方式: 方式1: 在外部类内提供一个方法创建内部类的对象进行访问. ...
- 关于final关键字
final修饰基本数据类型时 修饰的变量值不可变 final修饰引用数据类型时 修饰的变量地址不可变 值可变 final修饰一个类中的方法时 不可被子类重写 final修饰一个类时 不可被其他类继承 ...
- 网络层主要协议与arp欺骗
网络层主要协议与arp欺骗 目录 网络层主要协议与arp欺骗 一.网络层(Network Layer) 1.网络层的功能 2.IP数据报(IP Datagram) 二.网络层的主要协议 1.ICMP协 ...
- Byobu安装与使用
机子为Ubuntu18 Byobu安装 sudo apt-get install byobu Byobu安装后默认禁用,需要启用Byobu,之后每次登陆自动启用Byobu byobu-enable 还 ...
- Linux运行级别及解释
Linux中有七个运行级别,分别为0~7 0级:关机 1级:单用户(找回丢失密码) 2级:多用户无网络 3级:多用户有网络,最常用的级别 4级:保留,目前Linux暂无使用 5级:图像界面 6级:重启 ...