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

2023-12-30 19:20
文章标签 使用 封装 组件 项目 分页 table el elementui 二次 实际 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。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2