基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

本文主要是介绍基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用],希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果:

二次封装elementUI表格及其分页组件,并在项目中使用

二次封装el-table组件

<template><div><!-- showHeader:是否显示头部size:表格的大小height:表格的高度isStripe:表格是否为斑马纹类型tableData:表格数据源isBorder:是否表格边框handleSelectionChange:行选中,多选内容发生变化回调函数fit:列的宽度是否自己撑开isRowBgc:如果需要设定行背景,需要指定rowClassNamerowClassName:{bgc:"pink", //背景颜色attrName:"xs", //需要根据是否背景的属性},isMutiSelect:是否需要多选isRadio:是否单选isCondition:表头是否有赛选条件框--><el-table:show-header="table.showHeader":size="table.size":height="table.height":stripe="table.isStripe":data="table.tableData":border="table.isBorder":row-key="getRowKeys"@sort-change="handleSort"@select="handleSelect"@select-all="handleSelectAll"@selection-change="handleSelectionChange"style="width: 100%"highlight-current-row:row-style="table.isRowBgc?tableRowClassName:{}"><el-table-column v-if="table.isRadio" align="center" width="55" label="选择"><template slot-scope="scope"><!-- 可以手动的修改label的值,从而控制选择哪一项 --><el-radio @input="singleElection(scope.row)" class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio></template></el-table-column><el-table-columnv-if="table.isMutiSelect"type="selection"style="width: 60px"></el-table-column><template v-for="(col, key) in table.columns"><el-table-columnv-if="col.type === 'slot'":key="key":prop="col.prop":label="col.label":width="col.width":align="col.align":header-align="col.headerAlign"><template slot-scope="scope"><slot :name="col.slot_name" :row="scope.row"></slot></template><el-table-column :align="col.align" v-if="col.isCondition" :label="col.label" :prop="col.prop"><templateslot="header"slot-scope="/* eslint-disable vue/no-unused-vars */ scope"><slot :name="col.slot_siff_name"></slot></template></el-table-column></el-table-column><el-table-columnv-else:key="key":fixed="col.isFixed"v-show="col.hide":prop="col.prop":label="col.label":width="col.width":align="col.align":header-align="col.headerAlign"><el-table-column  v-if="col.isCondition" :align="col.align" :label="col.label" :prop="col.prop"><templateslot="header"slot-scope="/* eslint-disable vue/no-unused-vars */ scope"><slot :name="col.slot_siff_name"></slot></template></el-table-column></el-table-column></template></el-table></div>
</template>
<script>
export default {name: "hsk-table",props: {data: Object,},data() {return {templateSelection: "",  //当前选择行的id checkList: [],//   当前选择的行的数据table: {showHeader:true, //是否显示表头fit:"true", //列的宽度是否自动撑开size:"small", //表格大小类型 medium / small / miniheight:"500",  //高度isRowBgc:true,  //是否开启根据行某个属性更改背景rowClassName: null, //行背景及其根据哪一个属性进行判断是否背景columns: [], //列数据tableData: [], //表数据isMutiSelect: false, //是否行多选isRadio:false, //是否单选isBorder: true, //是否边框isStripe: false, //是否斑马纹},};},watch: {data: {handler(newVal) {this.init(newVal);},immediate: true,deep: true,},},methods: {tableRowClassName(e) {if(e.row[this.table.rowClassName.attrName]){return {background:this.table.rowClassName.bgc}}else{return {}}},async init(val) {for (let key in val) {if (Object.keys(this.table).includes(key)) {this.table[key] = val[key];}}},getRowKeys(row) {return row.id;},handleSort(column, prop, order) {this.$emit("tableSort", column, prop, order);},handleSelectionChange(val) {this.$emit("selectChange", val);},//多行选择handleSelectAll(val) {this.$emit("selectAll", val);},//多选handleSelect(val, row) {this.$emit("select", val, row);},//单选singleElection(row){this.$emit("radioSelectChange", row);}},
};
</script><style scoped>
.b {color: pink;
}
</style>

属性参数

属性说明
showHeader是否显示头部
height表格的高度
size表格大小
isStripe表格是否为斑马纹类型
tableData表格数据源
isBorder是否表格边框
handleSelectionChange行选中,多选内容发生变化回调函数
fit列的宽度是否自己撑开
isRowBgc如果需要设定行背景,需要指定rowClassName
rowClassName例子: { bgc:“pink”, //背景颜色 attrName:“xs”, //需要根据是否背景的属性 },
isMutiSelect是否需要多选
isRadio是否单选
isCondition表头是否有赛选条件框

父组件使用实例

<template><div><HskTable :data="table" @select="tableSlect" @selectChange="selectChange"><template v-slot:tag_slot="scope"><el-link type="primary">{{ scope.row.status }}</el-link></template><template v-slot:controls_slot="scope"><el-button type="text" @click="viewClick(scope.row)" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template><template v-slot:data_siff_slot><el-inputv-model="table.roleName"size="mini"placeholder="请输入"clearable@clear="getList()"@keyup.enter.native="getList()"/></template><template v-slot:age_siff_slot><el-inputv-model="table.roleName"size="mini"placeholder="请输入"clearable@clear="getList()"@keyup.enter.native="getList()"/></template></HskTable><br /></div>
</template>
<script>
import HskTable from "../package/hsk-table/index.vue";
export default {name: "hskTable",components: {HskTable,},data() {return {isHidden:false,table: {showHeader: true, //是否显示表头size: "small", //列表的型号fit: true, //列的宽度是否自己撑开height: "600", //表格高度isRowBgc: false, //如果需要设定行背景,需要指定rowClassNamerowClassName: {bgc: "pink",attrName: "xs",},isStripe: false, // 是否边框isBorder: true,isMutiSelect: false, //是否需要多选isRadio: true, //是否单选// 列数据columns: [{type: "slot",label: "Tag",align: "center", //对其方式headerAlign: "center", //表头对其方式slot_name: "tag_slot",prop: "tag",width: "",},{label: "日期",prop: "date",isCondition: true,slot_siff_name: "data_siff_slot",width: "",},{label: "年龄",prop: "age",isCondition: true,slot_siff_name: "age_siff_slot",width: "",},{label: "姓名",prop: "name",width: "",},{label: "地址",prop: "address",width: "",},{type: "slot",label: "操作",slot_name: "controls_slot",width: "",},],// 行数据tableData: [{id: "1",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",status: true,age: 20,xs: true,},{id: "2",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",status: true,age: 20,xs: false,},{id: "3",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",status: true,age: 20,xs: true,},{id: "4",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",status: true,age: 20,xs: false,},{id: "5",date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",status: true,age: 20,xs: true,},{id: "6",date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",status: true,age: 20,xs: false,},{id: "7",date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",status: true,age: 20,xs: true,},{id: "8",date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",status: true,age: 20,xs: false,},],},};},methods: {//展开隐藏showHidden(){this.isHidden = !this.isHidden},//行选中tableSlect(val, row) {console.log("val, row", val, row);},//选中改变selectChange(val) {console.log("val", val);},},
};
</script><style>
.code {line-height: 20px;
}
.rotate-180 {transform: rotate(180deg);transition: transform 0.5s;
}
.rotate-0 {transform: rotate(0deg);transition: transform 0.5s;
}
</style>

效果:

基于ElementUI二次封装el-table

二次封装el-pagination组件

<template><!-- 分页组件 --><!-- size-change(每页条数)    pageSize 改变时会触发 --><!-- current-change(当前页)  currentPage 改变时会触发 --><!-- page-size    每页显示条目个数,支持 .sync 修饰符 --><!-- page-sizes   每页显示个数选择器的选项设置 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="pageSizes":page-size="pageSize":layout="layout":total="total"></el-pagination>
</template><script>
export default {name:"hsk-pagination",props: {currentPage: {type: [String, Number],default: 1,},total: {type: [String, Number],default: 0,},pageSizes: {type: Array,default: () => [10, 15, 30, 50],},pageSize: {type: [String, Number],default: 10,},layout: {type: String,default: "total, sizes, prev, pager, next, jumper",},},data() {return {};},methods: {handleSizeChange(val) {this.$emit("sizeChange", val);},handleCurrentChange(val) {this.$emit("currentChange", val);},},
};
</script>
<style lang="less" scoped>
.page {text-align: center;color: #409eff;
}
</style>

属性参数

属性说明
size-change(每页条数)pageSize 改变时会触发
current-change(当前页)currentPage 改变时会触发
page-size每页显示条目个数,支持 .sync 修饰符
page-sizes每页显示个数选择器的选项设置

父组件使用实例

<template><div class="tenant" style="margin: 15px"><el-row :gutter="24"><el-col :span="24" :xs="24"><hsk-pagination:total="queryParams.total":currentPage.sync="queryParams.current":pageSize="queryParams.pageSize"@sizeChange="sizeChange"@currentChange="currentChange"></hsk-pagination></el-col></el-row></div>
</template><script>
import { getListAppByPage } from "@/api/application/application";
export default {data() {return {queryParams: {current: 1,pageSize: 10,total: 0,}}},created() {this.getList();},mounted(){},methods: {sizeChange(val) {this.queryParams.pageSize = valthis.getList()},currentChange(val) {this.queryParams.current = valthis.getList()},/** 新增租户按钮操作 */resetQuery() {this.$refs.add.add();},getList() {// 接口文档getListAppByPage(this.queryParams).then((res) => {this.appList = res.data.data;this.table.tableData = res.data.datathis.queryParams.total = parseInt(res.data.total);}).catch((err) => {});},},
};
</script>
<style lang="scss" scoped>
</style>

效果

基于ElementUI二次封装el-pagination分页组件

这篇关于基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/553780

相关文章

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Ubuntu如何分配​​未使用的空间

《Ubuntu如何分配​​未使用的空间》Ubuntu磁盘空间不足,实际未分配空间8.2G因LVM卷组名称格式差异(双破折号误写)导致无法扩展,确认正确卷组名后,使用lvextend和resize2fs... 目录1:原因2:操作3:报错5:解决问题:确认卷组名称​6:再次操作7:验证扩展是否成功8:问题已解

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构