ElementUI Table 表格动态添加行和列

news2024/9/24 21:18:53

一、效果
在这里插入图片描述
懒得发什么动态图,直接静态就好了。
二、代码
本文参考代码:https://blog.csdn.net/qq_33791597/article/details/125605873
有需求的可以去看下原文,我是参考后又改造了一番

<template>
<div style="padding:10px">
    <el-button type="primary" size="mini" @click="addRows()">添加行</el-button>
    <el-button type="primary" size="mini" @click="addColumn()">添加列</el-button>
    <el-button type="danger" size="mini" @click="deleteRows()">删除行</el-button>
    <!-- <el-button type="primary" size="mini" @click="test()">测试</el-button> -->
    <!-- <el-button type="primary" size="mini" >提交</el-button> -->
</div>

<el-table :data="tableData" border style="margin:10px" ref="tb" @selection-change="handleDetailSelectionChange" :row-class-name="rowClassName">
    <el-table-column
        type="selection"
        width="50"
        align="center"
        />
    <el-table-column v-for="item in columnData" :key="item.prop"  :prop="item.prop" :width="item.width">
        <template slot="header">
            {{ item.label }}
            <i
                class="el-icon-remove"
                style="color:red;cursor:pointer;"
                @click="deleteColumns(item.prop)"
            ></i>
        </template>
        <template slot-scope="scope">
            <span v-if="scope.row[item.prop] !== null">
                <el-input v-model="scope.row[item.prop]"></el-input>
            </span>
            <span style="color: red; cursor: pointer;" v-else @click="deleteColumns(item.prop)">删除列</span>
        </template>
    </el-table-column>
    <!-- <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
        <el-button @click="deleteRows(scope)" v-if="scope.$index < tableData.length " type="text" size="small">删除行
        </el-button>
        </template>
    </el-table-column> -->
</el-table>
</template>
columnLabel: '', //要增加的列名
columnPropIndex: 3, //列属性自增
columnData: [{label:'测试1',prop:"items0"},{label:'测试2',prop:"items1"},{label:'测试3',prop:"items2"}],//列标题数组
checkedDetail:[],
//表格数据
tableData: [
    {
        items0: '666',
        items1: '666',
        items2: '666'
    },
    {
        items0: '777',
        items1: '777',
        items2: '777'
    },
    {
        items0: '888',
        items1: '888',
        items2: '888'
    }
]
/** 添加行 */
addRows() {
   const circle = this.tableData[0]; //取出数组中第一个对象
   if (circle) {
       const newObj = {};
       for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空;
           newObj[key] = '';
       }
       this.tableData.splice(this.tableData.length, 0, newObj);
   }
},
/** 选择行 */
handleDetailSelectionChange(selection){
   if (selection.length > 1) {         //删除一行
       this.$refs.tb.clearSelection();//清空用户的选择
       this.$refs.tb.toggleRowSelection(selection.pop());//切换某一行的选中状态
   } else {
       this.checkedDetail = selection;
   }
},
/** 删除行 */
deleteRows() {
   if (this.checkedDetail.length == 0) {
       this.$alert("请先选择要删除的数据", "提示", {
       confirmButtonText: "确定",
       });
   } else {
       this.tableData.splice(this.checkedDetail[0].index-1,1);
   }
},
/** 添加行索引 */
rowClassName({ row, rowIndex }) {
   row.index = rowIndex + 1;
},

/** 添加列 */
addColumn() {
   this.$prompt("请输入列名", "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消"
   }).then(({ value }) => {
       this.columnLabel = value
       const _this = this;
       // 1、//列标题数组中 增加一个标题
       const columnObj = {};
       var propStr = 'items'; //自定义一个列属性;
       columnObj.prop = propStr + this.columnPropIndex; //拼接自增数
       columnObj.label = this.columnLabel;
       this.columnData.push(columnObj);
       _this.columnPropIndex++; //自增数每次加一
       //2、数据包中每个对象增加一个生成的新属性
       _this.tableData.forEach(function (item, index) { //遍历数据包
       //每个对象新加一个属性 每一行数据值默认给''
       if (index < (_this.tableData.length )) {
           _this.$set(item, columnObj.prop, '');
       } else {
           //最后一个给null  才会是删除列的按钮 不然是输入框
           _this.$set(item, columnObj.prop, null);
       }
       });
   });
},

/** 删除列 */
deleteColumns(property) {
   const _this = this;
   // 你想删除属性:property
   _this.tableData.forEach(function (item, index) { //遍历数组中的每个对象 删除指定的属性
       _this.$delete(item, property);
   });
   // 2、删除表头数组里的数据
   _this.columnData.forEach(function (item, index) {
       if (item.prop === property) {
       _this.columnData.splice(index, 1);
       }
   });
},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

磁盘 - 内存 - 中央处理器缓存 / 用户缓存区 - 内核缓存区 / 零拷贝

文章目录 磁盘 - 内存 - 中央处理器缓存用户缓存区 - 内核缓存区零拷贝意义 这些概念比较常用&#xff0c;涉及到物理设备 - 操作系统概念&#xff0c;操作系统概念 - 数据结构的区分。记录一下以供后人取笑。 磁盘 - 内存 - 中央处理器缓存 这些是计算机中比较常用的物理设备…

stable-diffusion-webui 安装问题记录

安装完成后&#xff0c;浏览器打开&#xff1a;http://127.0.0.1:7860/&#xff0c;无论点哪里&#xff0c;只要触发交互&#xff0c;都提示&#xff1a; 解决办法&#xff1a; 1、关闭&#xff08;墙外魔法工具&#xff09;软件&#xff08;不一定有效&#xff09; 2、需要不…

将 Layui 日历框,一周开始由星期日改为星期一

Layui 的日历框控件中&#xff0c;一周的开始是星期日。 但是我更习惯一周开始为星期一。在 ISO8601:2000 中&#xff0c;其中也是规定了&#xff1a;每个日历星期从星期一开始&#xff0c;星期日为第 7 天。 所以改一下。 改 layui.all.js 或 laydate.js&#xff08;取决于…

今日分享:如何文本转语音

嘿&#xff0c;各位小伙伴们&#xff01;你们有没有遇到过想看文章但是又赶时间的情况呢&#xff1f;这时候&#xff0c;文本转语音工具就可以帮助你啦&#xff01;通过使用文本转语音工具&#xff0c;你就可以实现听取文章内容而不必亲自看它们了&#xff0c;真是省时又省力。…

node对应的npm版本

官网地址&#xff1a;node对应的npm版本地址

HTML5+CSS3+JS小实例:Tab选项卡动画切换效果

实例:Tab选项卡动画切换效果 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name=&q…

eclipse中maven项目pom.xml文件报错:Missing artifact com.sun:tools:jar:1.8.0解决

背景&#xff1a;在引入新的jar包后&#xff0c;突然pom.xml文件就飘红了&#xff0c;提示Missing artifact xxx 原因&#xff1a;新导入的jar包依赖别的jar包&#xff0c;别的jar包因为比较旧&#xff0c;缺失相关文件 处理&#xff1a; 1、找到本地的repository地址&#…

openlayers:圆孔相机根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域

本示例的目的是介绍演示如何在vue+openlayers中模拟圆孔相机的拍摄场景,根据卫星经度、纬度、高度、半径比例推算绘制地面的拍摄的区域。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 文章目录 示…

[算法前沿]--021-baichuan-7B的测试教程

1.百川模型介绍 baichuan-7B不仅在C-Eval、AGIEval和Gaokao中文权威评测榜单上,以显著优势全面超过了ChatGLM-6B等其他大模型,并且在MMLU英文权威评测榜单上,大幅领先LLaMA-7B。baichuan-7B是由百川智能开发的一个开源的大规模预训练模型。基于Transformer结构,在大约1.2万…

推或拉? rabbitMQ 消费模式该如何选择

系列文章目录 消息队列选型——为什么选择RabbitMQ RabbitMQ 五种消息模型 RabbitMQ 能保证消息可靠性吗 文章目录 系列文章目录前言一、推拉两种模式的概念二、推模式的使用及优势1. 使用2. 优劣 三、拉模式的使用及优势1. 使用2. 优劣 四、消费端Ack模式与Qos1. Ack模式2. Q…

Linux——1初识linux

目录 1.1 硬件和软件 1.2 初识Linux 1.2.1 Linux的诞生 1.2.2 LInux内核 1.2.3 Linux发行版 1.3 虚拟机介绍 1.4 VMware WorkStation 安装 1.5 在VMware上安装Linux 1.6 远程连接Linux系统 1.6.1 图形化、命令行 1.6.2 FinalShell 1.1 硬件和软件 我们所熟知的计算…

6.S081——设备中断与驱动部分(串口驱动与Console)——xv6源码完全解析系列(8)

0.briefly speaking 点此返回上一篇博客 上一篇博客中我们简单介绍了UART和PLIC的初始化过程&#xff0c;并迭代式的分析了console的读写操作&#xff0c;这篇博客接着上一篇的话题&#xff0c;研究一下一个字符是怎么一步步被显示到我们的屏幕上的&#xff0c;经过了哪些设备…

PyCharm 2021.1.1 x64的安装 和环境搭建

环境变量 D:\Python38 path 免安装

【id:80】【20分】B. 复数的加减乘运算(运算符重载)

题目描述 定义一个复数类&#xff0c;通过重载运算符&#xff1a;、-、*&#xff0c;实现两个复数之间的各种运算。 class Complex { private:float real, image; public:Complex(float x 0, float y 0);friend Complex operator(Complex&, Complex&);friend Comple…

python中使用OAK-D PRO相机实现OCR功能

目录 OAK简介Tesseract简介Tesseract OCR安装包安装 Tesseract OCR 代码实现 OAK简介 OAK&#xff08;OpenCV AI Kit&#xff09;是一个开源的智能视觉平台&#xff0c;它集成了硬件和软件组件&#xff0c;旨在提供高性能的实时目标检测、识别和跟踪等视觉AI功能。OAK由Luxoni…

【夜深人静学JAVA | 第二十三篇】集合体系结构

目录 前言&#xff1a; 单列集合&#xff1a; set与list的区别&#xff1a; 双列集合&#xff1a; map的特点&#xff1a; 总结&#xff1a; 前言&#xff1a; JAVA中为我们提供了很多集合&#xff0c;这些集合都有自己很独特的特点&#xff0c;因此我们要学习所有的…

【Nginx】第五章 Nginx配置实例-负载均衡

5.1 实现效果 浏览器地址栏输入地址 http://192.168.6.100/edu/index.html&#xff0c;负载均衡效果&#xff0c;将请求平均分配到8080和8081两台服务器上。 5.2 准备工作 &#xff08;1&#xff09;准备两台tomcat服务器&#xff0c;一台8080&#xff0c;一台8081 &#x…

数据结构C语言版本(上)

第一章 绪论 第一节 什么是数据结构&#xff1f; 估猜以下软件的共性&#xff1a;学生信息管理、图书信息管理、人事档案管理。   数学模型&#xff1a;用符号、表达式组成的数学结构&#xff0c;其表达的内容与所研究对象的行为、特性基本一致。 信息模型&#xff1a;信息…

FANUC机器人SRVO-220 SDI保险丝熔断报警处理方法

FANUC机器人SRVO-220 SDI保险丝熔断报警处理方法 一般在R-30iB Mate Plus柜的机器人上会遇到这个报警&#xff0c;R-30iB Plus柜则不会遇到这个报警。 如下图所示&#xff0c; 故障原因&#xff1a; 机器人EE接口的接线有短路的情况&#xff0c;检查EE接口的接线&#xff0…

Mybatis-Plus:实现自定义SQL

目录 1.简介 2.自定义SQL具体实现 2.1.注解SQL 2.2.Wrapper传参注解SQL 2.3.Wrapper传参xml文件SQL 2.4.正常传参XML文件SQL 3.总结 1.简介 Mybatis-Plus&#xff08;以下简称MBP&#xff09;的初衷是为了简化开发&#xff0c;而不建议开发者自己写SQL语句的&#xff1b…