element table封装,element组件 table
这篇文章主要介绍了元素-用户界面封装一个桌子模板组件的示例，帮助大家更好的理解和学习某视频剪辑软件框架的使用，感兴趣的朋友可以了解下
大家在做后台管理系统的时候，写的最多的可能就是表格页面了，一般分三部分：搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现，比如说元素-ui，或者使变得有价值。这两个组件库都各有各的优点，但就桌子组件来说，我还是比较喜欢使虚弱的实现，不用手写一个个列，只要传入头球的配置数组就行，甚至分页器都内置在了桌子组件里，用起来十分方便。有兴趣可以看看：验证数据表。
上面是一个经典的用元素-用户界面开发的桌子页面，而且实际工作中如果每个桌子页面都写一遍，重复代码太多了，所以不妨写一个桌子模板组件，减少重复代码。我的思路是这样的：
搜索功能区：
提供搜索框插槽，可以自定义搜索输入框，搜索、重置按钮必有，新增按钮通过小道具控制显隐。这里对应的代码如下：
genSearchBar() {
if (this.noSearchBar ！这个. scopedSlots.searchBar)返回"";
返回（
El-form class= seatch-form inline={ true } label-width= 100
{这个10.10 $ scopedslots . search bar()}
埃尔按钮
class=筛选项目
icon=el-icon-search
type=primary
onClick={ this。handlesearchbtnclick }
查询
/el-button
埃尔按钮
class=筛选项目
icon=el-icon-refresh
onClick={ this。handleresetbtnclick }
重置
/el-button
埃尔按钮
class=筛选项目
icon=el-icon-plus
type=primary
v-show={this.showAddBtn}
onClick={ this。handleaddbtnclick }
新增
/el-button
/el格式
);
}
表格内容区：
通过传入头球自动生成列，参数如下：
{
标签: 性别，
道具："性",
宽度： 180 ,
过滤器："性过滤器"
}
可对应如下代码：
埃尔-表格-列
道具=性
标签=性别
宽度=180
模板插槽-scope=“scope”{ scope。划。性性过滤器} }/模板
/El-表格-列
注意，只支持全局过滤器。
如果你想自定义列，也提供表格列插槽，支持自定义列，可以如下配置：
{
道具："动作"
}
埃尔-表格-列
prop=动作
标签=操作
宽度=180
模板槽-范围="范围"
埃尔按钮编辑/el-button
埃尔按钮删除/el-button
/模板
/El-表格-列
这样，就会按传入的支柱匹配对应的列，十分方便。
实现代码如下：
genTableSlot(h) {
让customeColumns=this .$scopedSlots.tableColumn
？这个. scopedSlots.tableColumn()
: [];
归还这个。标题。映射((项目)={
//根据项目。道具判断是否使用传入的插槽内容
let found item=自定义列。查找(
(ele)
ele.componentOptions选项选项
ele。组件选项。道具数据。道具===物品。支柱
);
返回发现项目
？发现项目
:h(el-table-column ，{
道具：{
.项目，
},
scopedSlots: {
默认值：(道具)={
//根据传入的全局过滤器处理圆柱数据
让过滤器=这个. options.filters[
项目。过滤器
];
让物品价值=道具。行[项目。prop]；
返回h(
span ，
过滤器？过滤器（项目值) :项目值
);
},
},
});
});
}
可绅士化(h) {
返回h(
埃尔表，
{
ref: tableRef ，
道具：{
.这个$attrs，
数据：this.data，
},
开：{
选择-更改：(val)={
这个. emit(选择-更改，val)；
},
},
},
[.this.genTableSlot(h)]
);
}
分页器区：
如无特殊需求，分页器功能一致，所以直接内置。
实现代码如下：
genPagination() {
返回（
div class=分页-换行
埃尔分页
布局=总计，上一页，分页，下一页，跳转
current-page={this.current}
page-size={this.pageSize}
total={this.total}
{.{
on:{ current-change :这个。handlecurrentchange }，
}}
/El-分页
/div
);
}
最后附完整代码和演示：
脚本
导出默认值{
名称：" TableTemplate "，
道具：{
数据：{
类型：数组，
默认值：()=[],
必填：真，
},
标题：{
类型：数组，
默认值：()=[],
必填：真，
},
当前：{
类型：数量，
默认值：1,
},
页面大小：{
类型：数量，
默认值：10,
},
总计：{
类型：数量，
默认值：0,
},
noSearchBar: Boolean，
showAddBtn: Boolean，
},
已安装(){
这个. nextTick(()={
这个. emit( search )；
});
},
方法：{
genSearchBar() {
if (this.noSearchBar ！这个. scopedSlots.searchBar)返回"";
返回（
El-form class= seatch-form inline={ true } label-width= 100
{这个10.10 $ scopedslots . search bar()}
埃尔按钮
class=筛选项目
icon=el-icon-search
type=primary
onClick={ this。handlesearchbtnclick }
查询
/el-button
埃尔按钮
class=筛选项目
icon=el-icon-refresh
onClick={ this。handleresetbtnclick }
重置
/el-button
埃尔按钮
class=筛选项目
icon=el-icon-plus
type=primary
v-show={this.showAddBtn}
onClick={ this。handleaddbtnclick }
新增
/el-button
/el格式
);
},
genTableSlot(h) {
让customeColumns=this .$scopedSlots.tableColumn
？这个. scopedSlots.tableColumn()
: [];
归还这个。标题。映射((项目)={
//根据项目。道具判断是否使用传入的插槽内容
let found item=自定义列。查找(
(ele)
ele.componentOptions选项选项
ele。组件选项。道具数据。道具===物品。支柱
);
返回发现项目
？发现项目
:h(el-table-column ，{
道具：{
.项目，
},
scopedSlots: {
默认值：(道具)={
让过滤器=这个. options.filters[
项目。过滤器
];
让物品价值=道具。行[项目。prop]；
返回h(
跨度，
过滤器？过滤器（项目值) :项目值
);
},
},
});
});
},
可绅士化(h) {
返回h(
埃尔表，
{
ref: tableRef ，
道具：{
.这个$attrs，
数据：this.data，
},
开：{
选择-更改：(val)={
这个. emit(选择-更改，val)；
},
},
},
[.this.genTableSlot(h)]
);
},
genPagination() {
返回（
div class=分页-换行
埃尔分页
布局=总计，上一页，分页，下一页，跳转
current-page={this.current}
page-size={this.pageSize}
total={this.total}
{.{
on:{ current-change :这个。handlecurrentchange }，
}}
/El-分页
/div
);
},
resetPagination() {
这个. emit(update:current ，1)；
},
handleCurrentChange(val) {
这个. emit(update:current ，val)；
这个. emit( search )；
},
handleSearchBtnClick() {
这个. emit( search )；
},
handleResetBtnClick() {
这个。重置分页()；
这个. emit( reset )；
},
handleAddBtnClick() {
这个. emit( add )；
},
getTableRef() {
归还这个. refs.tableRef
},
},
渲染(h) {
返回（
差异
{this.genSearchBar()}
{this.genTable(h)}
{this.genPagination()}
/div
);
},
};
/脚本
样式范围。seatch-form {
文本对齐：左对齐；
}。分页-换行{
边距-顶部：20px
文本对齐：右对齐；
}
/风格
演示：
模板
差异
表格模板
边界
：头=头
:data=tableData
:current.sync=current
:total=total
ref=tableTemplate
showAddBtn
@search=handleSearch
@reset=handleReset
@add=handleAdd
@ selection-change= handleSelectionChange
模板#搜索栏
El-表单-项目标签=姓名： prop=title
El-input class= filter-item v-model=搜索表单。标题/El-输入
/El-表单-项目
/模板
模板#表列
埃尔-表格-列
prop=selection
type=selection
宽度=55
/El-表格-列
埃尔-表格-列属性=测试标签=姓名宽度=180
模板槽-范围="范围"
埃尔-波普沃触发器=悬停位置=顶部
p姓名：{{ scope.row.name }}/p
p住址：{{ scope.row.address }}/p
div slot= reference class= name-wrapper
El-tag size= medium { scope。划。name } }/El标签
/div
/el-popover
/模板
/El-表格-列
/模板
/表格模板
/div
/模板
脚本
从导入平板电脑./表模板；
导出默认值{
名称：演示，
组件：{
平板电脑，
},
data() {
返回{
电流：1,
总计：100,
标题：[
{
道具："选择",
},
{
标签: 姓名，
道具："名称",
宽度： 100 ,
},
{
标签: 年龄，
属性："年份",
},
{
标签: 性别，
道具："性",
宽度：性过滤器，
},
{
道具："测试",
},
],
表格数据：[
{
名字："库里",
年份：18,
性别："女性",
地址： 天安门，
},
],
搜索表单：{
标题： ,
},
};
},
方法：{
handleSearch() {
控制台。日志(这个。当前)；
},
handleReset() {
this.searchForm={
标题： ,
};
},
handleAdd() {
console.log(添加);
},
handleSelectionChange(val) {
控制台。日志(val)；
},
getTableRef() {
console.log(这个参考文献。表格模板。gettable ref())；
},
},
};
/脚本
以上就是元素-用户界面封装一个桌子模板组件的示例的详细内容，更多关于元素-用户界面封装组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。