当前位置: 首页 > news >正文

vue3封装Element Plus table表格组件

支持绝大部分Element Plus原有设置属性,支持分页,支持动态适配高度

 效果展示

 

组件代码: 
<template><div class="table-wrap" ref="tableWrap"><el-tableclass="w100 h100":data="tableInfo.tableData":height="tableHeight"v-bind="attrs"><!-- 动态生成列 --><template v-for="(item, index) in columns" :key="index"><!-- 选择列 --><el-table-columnv-if="item.type == 'selection'"type="selection"v-bind="item"></el-table-column><!-- 普通列 --><el-table-column v-else-if="!item.subColumns" v-bind="item"><template #default="scope"><slot :name="item.prop" :scope="scope">{{ scope.row[item.prop] }}</slot></template></el-table-column><!-- 嵌套列 --><el-table-column v-else v-bind="item"><el-table-columnv-for="(child, childIndex) in item.subColumns":key="childIndex"v-bind="child"><template #default="scope"><slot :name="child.prop" :scope="scope">{{ scope.row[child.prop] }}</slot></template></el-table-column></el-table-column></template></el-table><el-pagination:page-sizes="pageSizes":current-page="page.currentPage":page-size="page.pageSize"backgroundlayout="total, sizes, prev, pager, next, jumper":total="tableInfo.total"@size-change="handleChangePage({currentPage: page.currentPage,pageSize: $event,})"@current-change="handleChangePage({currentPage: $event,pageSize: page.pageSize,})"/></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from "vue";// Props 接收
const { tableInfo, columns, pageSizes, ...props } = defineProps({tableInfo: {type: Object,default: () => {return {tableData: [],total: 0,};},},columns: {type: Array,default: () => [],},pageSizes: {type: Array,default: () => [10, 25, 50, 100],},
}); 
const emit =  defineEmits(["current-change"]);
// 获取其他绑定属性
const { attrs } = getCurrentInstance();// 引用
const tableWrap = ref(null);
const tableHeight = ref(50); // 默认高度
let resizeObserver = null;//分页
const page = ref({currentPage: 1,pageSize: 10,
});//函数
const handleChangePage = ({ currentPage, pageSize }) => {page.value.currentPage = currentPage;page.value.pageSize = pageSize;emit("current-change", { currentPage, pageSize});
};// 动态计算表格高度
const initResizeObserver = () => {if (!tableWrap.value) return;//   32是分页高度 10和分页的间隔resizeObserver = new ResizeObserver(() => {tableHeight.value = tableWrap.value.offsetHeight - 32 - 10 || 500;});resizeObserver.observe(tableWrap.value);
};// 生命周期
onMounted(() => initResizeObserver());
onUnmounted(() => resizeObserver?.disconnect());
</script><style scoped lang="scss">
.table-wrap {width: 100%;height: 100%;overflow: auto; /* 根据需求适配 */display: flex;flex-direction: column;gap: 10px;
}
</style>
使用方法:

 注意由于表格通过ref="tableWrap"获取的高度,然后ref="tableWrap"设置的高度百分百,所以在使用组件的时候注意组件的外层高度如下方的class="universalTable h100"。

但设置双层表头的时候注意需要把二级表头放在subColumns属性中。

table原生属性可直接加在组件上例如“ :border="true"”的写法,属性方法都可支持

<template><div class="universalTable h100"><universalTable:border="true":columns="columns":tableInfo="tableInfo"ref="refTable"@current-change="handleCurrentChange"><template #name="{ scope }"><span>{{ scope.row.name }}</span></template></universalTable></div>
</template>
<script setup name="Index">
import { ref, reactive, nextTick } from "vue";
//表头数据
const columns = ref([{type: "selection",},{label: "测试",subColumns: [{prop: "date",label: "Date",width: 100,},],},{prop: "name",label: "Name",width: 120,},{prop: "address",label: "Address",},
]);
//列表数据
const tableInfo = ref({tableData: [{date: "2016-05-03",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",address: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",address: "No. 189, Grove St, Los Angeles",},],total: 100,
});
//分页数据
const page = ref({currentPage: 1,pageSize: 10,
});
//获取分页数据
const handleCurrentChange = ({ currentPage, pageSize }) => {page.value.currentPage = currentPage;page.value.pageSize = pageSize;
};
</script><style scoped lang="scss">
.universalTable {
}
</style>

 

http://www.lryc.cn/news/489762.html

相关文章:

  • Qt之QWidget相关
  • 用web前端写出一个高校官网
  • 【笔记】Android Gradle Plugin配置文件相关说明-libs.versions.toml
  • 如何修复WordPress卡在维护模式
  • glob三个函数的效果
  • FreeRTOS:事件标志组与任务通知
  • c++11的动态类型
  • 付费会员渗透难,腾讯音乐的触顶挑战
  • 内网安全隧道搭建-ngrok-frp-nps-sapp
  • Load-Balanced-Online-OJ(负载均衡式在线OJ)
  • Postman之变量操作
  • 查找字符串中某个字符返回字符位置
  • 《数学物理学报》
  • 39页PDF | 毕马威_数据资产运营白皮书(限免下载)
  • K8s 一键部署 MongoDB 的 Replica-Set 和 MongoDB-Express
  • 2024小迪安全基础入门第四课
  • 一文详解使用java easyexcel导出文件的几种情况
  • 【蓝桥杯C/C++】深入解析I/O高效性能优化:std::ios::sync_with_stdio(false)
  • NUXT3学习日记四(路由中间件、导航守卫)
  • 数据科学与SQL:组距分组分析 | 区间分布问题
  • odoo18中模型的常用字段类型
  • 【如何用更少的数据作出更好的决策】-gpt生成
  • ara::com 与 AUTOSAR 元模型的关系总结
  • springboot整合hive
  • 浅谈 proxy
  • Ansys Maxwell:SheetScan - 导入材料特性曲线
  • 解决 Android 单元测试 No tests found for given includes:
  • 人工智能的核心思想-神经网络
  • JAVA中的Lamda表达式
  • 锂电池学习笔记(一) 初识锂电池