vue封装el-table表格组件

先上效果图:
在这里插入图片描述

本文包含了具名插槽、作用域插槽、jsx语法三种:

Render.vue(很重要,必须有):

<script>
export default {name: "FreeRender",functional: true,props: {scope:Object,render: Function},render: (h, ctx) => {console.log(222,ctx.props.render);// 通过打印会发现render函数会自动用h函数进行包裹return ctx.props.render ? ctx.props.render( ctx.props.scope) : "";}
};
</script>

Table.vue

<template><div><el-table :data="tableData" style="width: 100%" :stripe="stripe" :border="border" :size="size"v-loading="loading"@selection-change="handleSelectionChange"><!-- 是否支持复选 --><el-table-column v-if="isSelection" width="55" type="selection" /><el-table-column:prop="item.param":label="item.label"v-for="(item, index) in tableColumns":key="index":sortable="item.sortable":width="item.width"><template slot-scope="scope"><div v-if="item.render2"><Render:scope='scope.row':render="item.render2"></Render></div><slot v-else-if="item.slotName" :name="item.slotName" :row2="scope.row"></slot><span v-else>{{scope.row[item.param]}}</span></template></el-table-column><!-- 操作 --><el-table-column v-if="tableOperation.label" :label="tableOperation.label"><template slot-scope="scope"><slot :name="tableOperation.param" :scope="scope"><el-buttonsize="small"v-for="(item, index) in tableOperation.btnList":key="index"@click="handleClick(scope.row, item.type)">{{item.label}}</el-button></slot></template></el-table-column></el-table></div>
</template>
<script>
import Render from "@/components/Render";
export default {name: "Table",props: {tableColumns: {type: Array,required: true,default: () => {return []}},tableData: {type: Array,required: true,default: () => {return []}},tableOperation: {type: Object,default: () => {return {}}},stripe: {type: Boolean,default: true},border: {type: Boolean,default: true},size: {type: String,default: 'small'},loading: {type: Boolean,default: false},isSelection: {type: Boolean,default: false,}},components:{Render,},data() {return {h:'',}},methods: {handleClick(row, type) {this.$emit('handleClick', row, type)},handleSelectionChange(val) {this.$emit('handleSelectionChange', val)}}

使用Table组件

//html<Table:tableData="tableData":isSelection="true":tableColumns="tableColumns":tableOperation="tableOperation"@handleClick="handleClick"@handleSelectionChange="handleSelectionChange"><template #infoInput="scope"><el-input v-model="scope.row2.info"></el-input></template></Table>
// data & methodstableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",age: "1",progress:50,info:'好好学习',},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",age: "0",progress:60,info:'天天向上',},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",age: "1",progress:70,info:'为人名服务',},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",age: "1",progress:80,info:'为人名服务2',},],tableColumns: [{param: "date",label: "日期",width: "100",},{param: "name",label: "姓名",width: "100",},{param: "address",label: "地址",},{param: "age",label: "性别",render2: (row) => {return (<el-radio-group v-model={row.age}><el-radio label={"0"}></el-radio><el-radio label={"1"}></el-radio></el-radio-group>);},},{param:'progress',label:'进度',render2:(row)=>{return(<el-progress percentage={row.progress}></el-progress>)}},{param:'info',label:'信息',slotName:'infoInput',}],tableOperation: {label: "操作",btnList: [{label: "删除",type: "warning",param: "del",type: "del",},{label: "新增",type: "primary",param: "add",type: "add",},],},handleClick(val, type) {console.log("val1", val);console.log("type", type);},handleSelectionChange(val) {console.log("val2", val);},     

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我把springboot项目从Java 8 升级 到了Java 17 的过程总结,愿为君提前踩坑!

项目从jdk8升级到jdk17&#xff0c;我不是为了追求java 17的新特性&#xff08;准确来说也还没有去了解有什么新特性&#xff09;&#xff0c;也不是为了准确与时俱进&#xff0c;永远走在java行列的最前端&#xff0c;纯粹因为项目需要&#xff0c;因为我们都知道&#xff0c;…

【医学大模型 补全主诉】BioGPT + LSTM 自动补全医院紧急部门主诉

BioGPT LSTM 自动补全医院紧急部门主诉 问题&#xff1a;针对在紧急部门中自动补全主诉的问题子问题1: 提高主诉记录的准确性子问题2: 加快主诉记录的速度子问题3: 统一医疗术语的使用子问题4: 减少打字错误和误解子问题5: 提高非特定主诉的处理能力 解法数据预处理神经网络方…

微服务篇之限流

一、为什么要限流 1. 并发的确大&#xff08;突发流量&#xff09;。 2. 防止用户恶意刷接口。 二、限流的实现方式 1. Tomcat限流 可以设置最大连接数&#xff0c;但是每一个微服务都有一个tomcat&#xff0c;实现起来非常麻烦。 2. Nginx限流 &#xff08;1&#xff09;控…

十大基础排序算法

排序算法分类 排序&#xff1a;将一组对象按照某种逻辑顺序重新排列的过程。 按照待排序数据的规模分为&#xff1a; 内部排序&#xff1a;数据量不大&#xff0c;全部存在内存中&#xff1b;外部排序&#xff1a;数据量很大&#xff0c;无法一次性全部存在内存中&#xff0c;…

利用Ubuntu22.04启动U盘对电脑磁盘进行格式化

概要&#xff1a; 本篇演示利用Ubuntu22.04启动U盘的Try Ubuntu模式对电脑磁盘进行格式化 一、说明 1、电脑 笔者的电脑品牌是acer(宏碁/宏基) 开机按F2进入BIOS 开机按F12进入Boot Manager 2、Ubuntu22.04启动U盘 制作方法参考笔者的文章&#xff1a; Ubuntu制作Ubun…

每日学习总结20240222

每日总结 一旦停下来太久&#xff0c;就很难继续了 ——《一个人的朝圣》 20240222 1. 自定义逻辑 请设计一个函数single_track_logic,传入三个参数&#xff0c;第一个参数是int数组&#xff0c;第二个参数是一个int变量&#xff0c;第三个参数是一个以int为返回值&#xff0c…

dell r740服务器黄灯闪烁维修现场解决

1&#xff1a;首先看一下这款DELL非常主力的PowerEdge R740服务器长啥样&#xff0c;不得不说就外观来说自从IBM抛弃System X系列服务器后&#xff0c;也就戴尔这个外观看的比较顺眼。 图一&#xff1a;是DELL R740前视图&#xff08;这款是8盘机型&#xff09; 图二&#xff…

SICTF Round#3 wp web

web hacker sql无列名注入&#xff1b; 提示查询username参数&#xff0c;flag在flag表中&#xff1b; 传参测试发现&#xff0c;union select 可用&#xff0c;空格被过滤可以使用/**/代替 &#xff0c;or也被过滤了且无法大小写、双写等绕过&#xff0c;导致无法查询flag表…

Python实战:读取MATLAB文件数据(.mat文件)

Python实战&#xff1a;读取MATLAB文件数据(.mat文件) &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得到您的订阅…

Leetcoder Day18| 二叉树 part07

语言&#xff1a;Java/Go 今天做了一个小决定&#xff0c;如果时间不够的话&#xff0c;可以先看go去找实习&#xff0c;所以现在加上用go去刷题 530.二叉搜索树的最小绝对差 给你一棵所有节点为非负值的二叉搜索树&#xff0c;请你计算树中任意两节点的差的绝对值的最小值。…

常见锁策略,CAS,synchrodized原理讲解

&#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;那些在暗处执拗生长的花&#xff0c;终有一日会馥郁传香欢迎大家&#x1f44d;点赞✍评论⭐收藏 目录 常见锁策略 乐观锁和悲观锁 轻量级锁和重量级锁 自旋锁和挂起等待锁 读写锁 公平锁和非公平锁…

10大互联网技术受益于这个行业,它甚至推动互联网诞生

hello&#xff0c;我是贝格前端工场&#xff0c;今天分享某个行业存进了互联网技术发展&#xff0c;最早的互联网也是从该行业诞生的&#xff0c;希望老铁们喜欢&#xff0c;别忘了关注、点赞、评论、转发。 ARPANET 互联网的前身ARPANET最初是由美国国防部高级研究计划局&…

【云动世纪:Apache Doris 技术之光】

本文节选自《基础软件之路&#xff1a;企业级实践及开源之路》一书&#xff0c;该书集结了中国几乎所有主流基础软件企业的实践案例&#xff0c;由 28 位知名专家共同编写&#xff0c;系统剖析了基础软件发展趋势、四大基础软件&#xff08;数据库、操作系统、编程语言与中间件…

[力扣 Hot100]Day33 排序链表

题目描述 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 出处 思路 归并排序即可。 代码 class Solution { public:ListNode* merge(ListNode *h1,ListNode *h2) {ListNode *head nullptr;if(h1->val<h2->val){head h1;h1h1-…

SQL面试题及答案

介绍 在快节奏的数据管理和信息技术世界中,导航和操作结构化数据的能力是一项非常重要的技能。SQL,即结构化查询语言,是关系数据库的基石,掌握这种语言的专业人员的需求量很大。SQL 面试在科技行业很常见,潜在的候选人会接受测试以展示他们的知识和解决问题的能力。为了帮…

远程连接 vscode 出错 “远程主机可能不符合 glibc 和 libstdc++ VS Code 服务器的先决条件”

原因&#xff1a; vscode 版本是 1.86&#xff0c;服务器上的 glibc 和 libstdc 版本不满足 要求(2.28 和 3.4.25)。 解决&#xff1a; 1、下载 1.85.2&#xff0c;解压直接运行 Code.exe。 2、回退 Remote-ssh 到 0.107.1。 参考&#xff1a; vscode 1.86版本远程ssh不兼容旧…

java八股 redis

缓存穿透&#xff1f;如何解决&#xff1f; 缓存穿透是指查询一个一定不存在的数据&#xff0c;如果从存储层查不到数据&#xff0c;则不写入缓存&#xff0c;这就导致这个不存在的数据每次都要去数据库中查询&#xff0c;可能导致数据库挂掉。 可以通过布隆过滤器来解决。布隆…

每日五道java面试题之spring篇(三)

目录&#xff1a; 第一题 ApplicationContext和BeanFactory有什么区别&#xff1f;第二题 Spring中的事务是如何实现的&#xff1f;第三题 Spring中什么时候Transactional会失效&#xff1f;第四题 Spring容器启动流程是怎样的&#xff1f;第五题 Spring Boot、Spring MVC 和 S…

C语言第二十九弹---浮点数在内存中的存储

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、浮点数在内存中的存储 1.1、练习 1.2、浮点数怎么转化为二进制 1.3、浮点数的存储 1.3.1、浮点数存的过程 1.3.2、浮点数取的过程 1.3、题目解析…

【Python笔记-设计模式】原型模式

一、说明 原型模式是一种创建型设计模式&#xff0c; 用于创建重复的对象&#xff0c;同时又能保证性能。 使一个原型实例指定了要创建的对象的种类&#xff0c;并且通过拷贝这个原型来创建新的对象。 (一) 解决问题 主要解决了对象的创建与复制过程中的性能问题。主要针对…