elementui表单二次封装,element组件二次封装
本文主要介绍了基于元素-用户界面表格的二次封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在项目中经常会使用到元素的表格，如果每次都cv，也确实有点麻烦，基于这个情况我对表格进行了二次封装
写一个桌子组件
首先先写表格样式
埃尔表
:data=tableData
:header-cell-style=headerStyle
:height=height
:border=border
@ selection-change= handleSelectionChange
埃尔-表格-列
v-if=selection
type=selection
宽度=55
/El-表格-列
埃尔-表格-列
v-for=表属性中的v
:key=v.label
:prop=v.code
可排序的
:label=v.label
:width=v.width
模板槽-范围="范围"
div v-if=！"虚拟代码"
{ {范围。行[范围。专栏。属性]} }
/div
div-否则
插槽名称= row :row= scope。行/槽
/div
/模板
埃尔-表格-列
v-for=(item，i) in v.data
:key=i
:sortable=item.sortable
align=居中
:width=item.width
:prop=item.code
:label=item.label
模板槽-范围="范围"
div v-if=！"虚拟代码"
{ {范围。行[范围。专栏。属性]} }
/div
div-否则
插槽名称= row :row= scope。行/槽
/div
/模板
/El-表格-列
/El-表格-列
埃尔-表格-列标签=操作v-if=ishandle
模板槽-范围="范围"
slot name="edit":row="scope。row”:index=" scope .$index/slot
/模板
/El-表格-列
/el-table
列表数据为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为数据是否存在，页眉样式为表头样式，高度为表的高度，可排序以该列为基准的排序，边框是否显示边框，handleSelectionChange多选，选择是否显示多选我是处理是否显示操作，这里使用插槽进行写操作
导出默认值{
道具：{
高度：{
类型：数量，
默认值：220,
},
ishandle:{
类型：布尔型，
默认值：假的，
},
边框：{
类型：布尔型，
默认值：假的，
},
tableProp: {
类型：数组，
默认：()=[
{
代码："索引",
标签: 指标，
宽度：100,
},
{
代码：“PAC”，
标签:"包装",
宽度：120,
数据：{
代码：“PAB”，
标签:“PAB”，
宽度：60,
}
},
{
代码："帕姆",
标签:"帕姆",
宽度：60,
代码：真，
},
{
代码："功耗",
标签: 综合电耗（千瓦小时),
宽度：50,
},
{
代码："水_消耗量",
标签: 自用水率(%),
},
],
},
表数据：{
类型：数组，
默认：()=[
{
指数：1,
包装："1"
帕姆："1",
功耗："1",
水_消耗量："1"
}
]
},
风格：{
类型：字符串，
默认值： font-size:12px；填充：0;行高：继承；字体粗细：500;颜色：# 6a 7474
}
},
data() {
返回{
秀：假的，
};
},
方法：{
//样式
headerStyle() {
归还这个。风格；
},
//多选
handleSelectionChange(val){
这个. emit(SelectionChange ，val)
}
},
};
第二步加分页
埃尔分页
:background=background
:layout=layout
:total=total
:page-size=pageSize
:current-page.sync=current
:page-size= pageSizes
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:单页隐藏=单页
/El-分页
背景背景是否显示，布局组件布局，子组件名用逗号分隔，总计总条数，页面大小每页显示个数选择器的选项设置，当前当前页码，页面大小每页显示条目个数，单页只有一页时是否隐藏，handleSizeChangepageSize改变时会触发，handleCurrentChange改变时会触发
导出默认值{
道具：{
背景：{
类型：布尔型，
默认值：假的，
},
布局：{
类型：字符串，
默认值："总计、大小、上一页、翻页、下一页、跳转",
},
总计：{
类型：数量，
默认值：100,
},
页面大小：{
类型：数量，
默认值：10,
},
页面大小：{
类型：数组，
默认值：()=[10,20,30,40,50,100],
},
单页：{
类型：布尔型，
默认值：假的，
},
当前：{
类型：数量，
默认值：1,
},
},
方法：{
//页面大小改变时会触发
handleSizeChangepageSize (val) {
这个emit( handleSizeChangepageSize ，val)
},
//当前页面改变时会触发
handleCurrentChange(val){
这个emit(handleCurrentChange ，val)
}
},
};
在页面中使用
先引入Table.vue页面
桌子
：高度=90
class=左上表
:tableData=tableIndex
:tableProp=tableProp
@ handleCurrentChange= handleCurrentChange
@ handleSizeChangepageSize= handleSizeChangepageSize
模板slot=edit slot-scope=scope
El-button size= mini @ click= handleEdit(scope。index，scope.row)
编辑/el-button
/模板
/表格
//页面大小改变时会触发
handleCurrentChange(val){
.
}
//当前页面改变时会触发
handleSizeChangepageSize (val){
.
}
//编辑方法
handleEdit(索引，行){
.
}
更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形
到此这篇关于基于元素-用户界面表格的二次封装实现的文章就介绍到这了，更多相关元素表格二次封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。