el-table 组件复用开发（组件复用，多个表格使用同一个表格组件，操作栏不同）

最新推荐文章于 2023-09-26 15:28:20 发布
最新推荐文章于 2023-09-26 15:28:20 发布
阅读量862 收藏
点赞数
分类专栏： element ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josiecici/article/details/110951349
版权

1.表格不用大盒子装着来限制其盒子的高度来使表格滚动，直接使用文档内table属性来限制盒子的高度以出现滚动条。
如下图：
在这里插入图片描述
效果：
15vh时候
在这里插入图片描述
65vh时候
在这里插入图片描述

星良辰寻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JAVA上百实例源码以及开源项目
01-03
　Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...
tabs切换数据---多个tab页面使用一个data存储数据显示到el-table上,响应慢的请求数据覆盖掉响应快的数据
最新发布
weixin_43502666的博客
10-15 701
2、当点击tab时可以将前面的请求cancel掉,使用axios中的方法:axios.CancelToken.source()方法会创建一个令牌,为每个tab请求添加入参{cancelToken:axios.CancelToken.source().token},每次点击按钮发送请求前,将存在令牌的请求cancel掉(this.cancelToken.cancel(“请求已取消”)😉。(3)this.$set(this.objData, index, ‘请求的结果’);//为存储结果的对象设置响应式属性。
java表格换页加表头_Element实现表格嵌套、多个表格共用一个表头的方法；
weixin_31626765的博客
02-28 660
一、分析需求这里先上一张图说明 需求：根据后端返回的数据 (res 是一个数组，它的元素是一个对象，对象里面的ext属性是一个对象，它又包含了，default、free和pay三个属性，且这三个都是数组格式。)：渲染出一个这样子的 表格 ：res数据：res的每一个元素的直接属性name (即为邮费模板名称，比如成都运费模板)，res的ext属性下的三个数组 default、free、pay...
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
热门推荐
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-21 1万+
实战场景描述 实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。 1、确定好每个Tab内容 参考官网的例子改成我们的内容就好 2、Tab切换事件 今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T
vue+element项目中多个tabs页调一个接口、多个tabs页调多个接口
m0_56471534的博客
09-23 4034
vue+element-ui项目中使用tabs标签页，多个tabs页调一个接口、多个tabs页调多个接口
（Vue-ElementUI）Tab、Menu联动，点击使用同一组件生成新窗口，路由刷新问题
小刘的博客
09-26 717
Tab、Menu联动，使用一个文件生成多个内容相同tab名不同的view
element table组件复用
追逐的活
05-15 1975
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sunguoqiang1213/article/details/81230696 上一篇已经简单整理table插件，这次直接上代码，mytable.vue <template> <div> <el-table :data="tableData" ...
el-table中的表格的相同项合并（单元格合并），包含多层合并
weixin_46565787的博客
12-22 6649
在我们处理表格的时候，经常会出现表格的样式进行 表格的合并，如下图： 那么在el-table中如何进行合并了 ，上代码： //设置单元格 getSpanArr(list) { // 先给所有的数据都加一个v.rowspan = 1 list.forEach(item => { item.rowspan = 1; }); // 双层循环 for (let i = 0; i < list.lengt.
vue+element-ui el-tabs 标签实现在同一页面切换组件
weixin_44378416的博客
01-18 3472
<template> <div class="main-container"> <el-tabs v-model="currentView"> <el-tab-pane label="电视" name="Television"></el-tab-pane> <el-tab-pane label="电影" name="Movie"></el-tab-pane> <el-ta
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
狼魂之力
08-16 2496
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。 1、vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容（需要了解的朋友点击链接查看） 2、创建相应文件。 a、创建父组件 src/components/tabZujian.vue b、创建自组件（被切换的组件）src/ta...
多个el-tab共用一个表单校验问题
程序媛的博客
03-14 1075
表单校验问题，同一个表单，不同情况下，加入必填校验和去除必填校验。
java开源包1
06-28
jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。提供了一个基于对象模型的 ActionScript 字节码，并提供了 ActionScript 字节码统计工具。 Java类重加载工具 JReloader JReloader 是一个用来重新...
java开源包10
06-28
jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。提供了一个基于对象模型的 ActionScript 字节码，并提供了 ActionScript 字节码统计工具。 Java类重加载工具 JReloader JReloader 是一个用来重新...
java开源包8
06-28
jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。提供了一个基于对象模型的 ActionScript 字节码，并提供了 ActionScript 字节码统计工具。 Java类重加载工具 JReloader JReloader 是一个用来重新...
java开源包11
06-28
jActionScript 是一个使用了 JavaSWF2 的 Flash 解析器和生成器。提供了一个基于对象模型的 ActionScript 字节码，并提供了 ActionScript 字节码统计工具。 Java类重加载工具 JReloader JReloader 是一个用来重新...
使用element中el-table动态增减表头列的时候出现抖动闪动的问题
my466879168的博客
07-06 6766
el-table表格抖动的解决办法 动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可 //重写表格样式，不在自动计算，解决表格渲染时闪烁问题 //不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数 .el-table .cell{ height:20px!important; } 表头变动的时候数据可能会下掉，使用element中的dolayout函数解决 element中写到：doLayout方法 对Table进行重新布局。当
element框架一个页面多个table渲染互相影响解决方法
qq_43628158的博客
11-02 6039
场景一： tab切换，每个切换下面是一个表格，一个页面多个表格 场景二： 页面点击按钮（多个按钮），打开Dialog 对话框，每个按钮对应一个表格展示，一个页面多个表格 问题： tab切换或者打开不同的对话框，表格中展示数据会出现错乱，互相影响 出现此问题的原因： vue为了尽可能高效的渲染元素，会复用已有元素而非从头开始渲染，这么做会有一些好处，但有些情况并不适用，例如上述两个场景。 <template v-if="loginType === 'username'"> <label
vue 组件复用的两种方法以及el-tab-pane切换标签时如何重新触发钩子函数
77今天也学习了的博客
04-28 7210
当多个页面具有相同的页面模板时，想要共同同一个组件，有两种方法实现。 方法一 1.app.vue中 必须加上key属性，让每次进入路由时都重新触发钩子函数 <router-view :key="key" /> computed: { key() { // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同 // console.lo...
vue+tabs的组件切换功能
asdf_123123的博客
03-25 769
1. 每个tab都是一个组件 2. 每次切换tab重新渲染对应的tab组件(使用v-if控制) <template> <div> <el-tabs v-model="activeName" type="border-card"> <el-tab-pane v-for="item in tabList" :key="item...
Vue2 针对el-table进行封装实实现高复用性
05-25
Vue2 针对 el-table 进行封装可以提高代码的复用性，同时也能简化开发流程，让开发者能够更加专注于业务逻辑的实现。 以下是一个简单的 el-table 封装示例： ```vue <template> <el-table :data="tableData" :columns="columns" v-loading="loading"></el-table> </template> <script> export default { name: "MyTable", props: { data: { type: Array, required: true }, columns: { type: Array, required: true }, loading: { type: Boolean, default: false } }, data() { return { tableData: [] }; }, methods: { loadData() { this.tableData = this.data; } }, mounted() { this.loadData(); }, watch: { data() { this.loadData(); } } }; </script> ``` 在这个示例中，我们将 el-table 组件的 data 和 columns 属性分别作为 MyTable 组件的 props，通过 loadData 方法将 props 中的数据赋值给 tableData，并绑定到 el-table 的 data 属性上，实现了对 el-table 的封装。 使用这个封装后的组件，只需要传入相应的 data 和 columns 数据即可渲染出一个 el-table，如下所示： ```vue <template> <my-table :data="tableData" :columns="tableColumns"></my-table> </template> <script> import MyTable from "@/components/MyTable"; export default { components: { MyTable }, data() { return { tableData: [ { name: "John", age: 18, gender: "Male" }, { name: "Jane", age: 22, gender: "Female" } ], tableColumns: [ { prop: "name", label: "Name" }, { prop: "age", label: "Age" }, { prop: "gender", label: "Gender" } ] }; } }; </script> ``` 通过这种方式封装 el-table，我们可以大大提高代码的复用性，同时也能减少重复的代码编写，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值