element-table的动态操作,自动以表格,动态新增行、列,删除行列

灵活的自定义表格行列以及增删改查的操作,右键选中列则是列的删除,效果如下

 

 

 

 

<template><div class="st-table"><div style="width: 100%"><el-button @click="addRow()" type="primary" icon="CirclePlus">新增行</el-button><el-button @click="addCol()" type="primary" icon="CirclePlus">新增列</el-button><el-input type="text" placeholder="请输入关键字查询" v-model="tableParam.keyword" style="width: 200px;"/><el-button type="info" @click="queryList()">查询</el-button></div><el-table :data="tableData" border style="width: 100%" @header-contextmenu="cellClick"><el-table-column prop="type" label="类型" width="180"><template slot-scope="scope"><el-input type="text" v-model="scope.row.type" v-show="scope.row.iseditor" /><span v-show="!scope.row.iseditor">{{scope.row.type}}</span></template></el-table-column><el-table-column prop="code" label="编码" width="180"><template slot-scope="scope"><el-input type="text" v-model="scope.row.code" v-show="scope.row.iseditor" /><span v-show="!scope.row.iseditor">{{scope.row.code}}</span></template></el-table-column><el-table-column prop="value" label="值" width="180"><template slot-scope="scope"><el-input type="text" v-model="scope.row.value" v-show="scope.row.iseditor" /><span v-show="!scope.row.iseditor">{{scope.row.value}}</span></template></el-table-column><el-table-column prop="name" label="名称"><template slot-scope="scope"><el-input type="text" v-model="scope.row.name" v-show="scope.row.iseditor" /><span v-show="!scope.row.iseditor">{{scope.row.name}}</span></template></el-table-column><!-- 添加列 --><el-table-column v-for="(item,index) in tableHeader" :prop="item" :key="index" :label="item"><template slot-scope="scope"><el-input type="text" v-model="scope.row.item" v-show="scope.row.iseditor" style="position: relative;"/><span v-show="true"></span></template></el-table-column><!-- 添加列 --><el-table-column label="操作" width="240" align="center"><template slot-scope="scope"><el-button type="primary" @click="edit(scope.row)">编辑</el-button><el-button type="primary" @click="saves(scope.row)">保存</el-button><el-button type="danger" @click="delRow(scope.row)">删除</el-button></template></el-table-column></el-table><el-dialog title="添加表格列" :visible.sync="dialogFormVisible" :modal='false' :close-on-click-modal="false" width="30%"><el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="getcol()">确 定</el-button></div></el-dialog><div class="toolbar" style="padding: 25px;"><pagination v-show="tableParam.total>0" :total="tableParam.total" :page.sync="tableParam.pageNumber" :limit.sync="tableParam.pageSize" @pagination="queryList"/></div></div>
</template>
<script>
import { openMessageSuccess, openMessageWarning, openMessageError } from '@/api/assembly/openMessage'
import Pagination from '@/components/Pagination'
import {query, save,del} from '@/api/zczy/dict'
export default {components: {Pagination},created() {this.initData()document.oncontextmenu = function(){return false}},data() {return {colName: '',tableParam: {pageNumber: 0,pageSize: 10,total: 0,keyword: "",},tableData: [{code: "cs1",value: "1",name: "测试1",iseditor: false},{code: "cs2",value: "2",name: "测试2",iseditor: false}],tableHeader: [],dialogFormVisible: false,delVisible: false};},methods: {queryList(){query(this.tableParam).then(res => {this.tableData = res.listthis.tableParam.total = res.totalthis.tableParam.pageNumber = res.pageNumberthis.tableParam.pageSize = res.pageSizethis.tableData.forEach(element => {this.$set(element,'iseditor',false)});})},// 新增行addRow(){const row = {code: "",value: "",name: "",iseditor: true};this.tableData.push(row)},//新增列addCol(){this.dialogFormVisible = trueif(this.colName !==''){this.tableHeader.push(this.colName)}},getcol(){this.addCol()this.dialogFormVisible = falsethis.colName = ''},//删除列cellClick(column, event) {this.$confirm('是否删除列:'+column.label+' ?', "提示", {confirmButtonText: '确定', type: 'info'}).then(() => {openMessageSuccess('测试')//   saveProject(this.rowData).then(res => {//   openMessageSuccess(res.msg)//   this.dealClose()// })})},delRow(row) {const index = this.tableData.indexOf(row)this.tableData.splice(index, 1);let params = {id:row.id}del(params).then(res=>{openMessageSuccess(res.msg)this.queryList()})},edit(row) {row.iseditor = true;},saves(row) {save(row).then(res=>{openMessageSuccess(res.msg)this.queryList()})},//初始化数据initData() {// this.queryList()}},}
</script>
<style>.mybtn{color: #fff;background-color: #67c23a;border-color: #67c23a;}
</style>

为了方便可以直接复制代码查看效果已把动态数据换成自定义数据

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

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

相关文章

在CSS中,盒模型中的padding、border、margin是什么意思?

在CSS中&#xff0c;盒模型&#xff08;Box Model&#xff09;是用来描述和布局HTML元素的基本概念。它将每个HTML元素看作是一个矩形的盒子&#xff0c;这个盒子包括了内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&a…

无涯教程-PHP - intval() 函数

PHP 7引入了一个新函数 intdiv()&#xff0c;该函数对其操作数执行整数除法并将该除法返回为int。 <?php$valueintdiv(10,3);var_dump($value);print(" ");print($value); ?> 它产生以下浏览器输出- int(3) 3 PHP - intval() 函数 - 无涯教程网无涯教程网…

【图像分割】实现snake模型的活动轮廓模型以进行图像分割研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

raft算法学习备忘

一致性共识算法 参考:分布式一致性算法应用场景&#xff0c;写了为什么需要共识算法&#xff0c;以及相比于mysql这些主从同步方式的区别。 raft算法简介 一种分布式一致性共识算法的实现方式&#xff0c;机制相比于其它例如paxos来说无论从可读性还是实现机制上要简单很多&…

3种获取OpenStreetMap数据的方法【OSM】

OpenStreetMap 是每个人都可以编辑的世界地图。 这意味着你可以纠正错误、添加新地点&#xff0c;甚至自己为地图做出贡献&#xff01; 这是一个社区驱动的项目&#xff0c;拥有数百万注册用户。 这是一个社区驱动的项目&#xff0c;旨在在开放许可下向每个人提供所有地理数据。…

大数据课程K6——Spark的Shuffle详解

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解Spark的定义&&特点&&目的&&优缺点; ⚪ 掌握Spark的相关参数配置; ⚪ 掌握Hadoop的插件配置; 一、Spark Shuffle详解 1. 概述 Shuffle,就是洗牌。之所以…

安防监控平台EasyCVR视频汇聚平台增加首页告警类型的详细介绍

安防监控/视频集中存储/云存储EasyCVR视频汇聚平台&#xff0c;可支持海量视频的轻量化接入与汇聚管理。平台能提供视频存储磁盘阵列、视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、平台级联、H.265自动转码等…

vue3-ts- element-plus新增组件-过滤

新增组件-所有值为空时过滤 <el-form-item label"家庭成员"><divclass"username-box"v-for"(item, index) in form.namelist":key"index"><div>姓名&#xff1a;<el-input v-model"item.name" placeho…

Java异常

异常体系结构Java异常的分类异常处理异常抛出异常声明异常捕获异常处理流程自定义异常 异常体系结构 .Error&#xff1a;指的是Java虚拟机无法解决的严重问题&#xff0c;比如&#xff1a;JVM的内部错误、资源耗尽等&#xff0c;典型代表&#xff1a;StackOverflowError&#…

uniapp-滑块验证组件wo-slider

wo-slider是一款支持高度自定义的滑块验证组件&#xff0c;采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序&#xff08;其他小程序未试过&#xff0c;可自行尝试&#xff09; 可到插件市场下载尝试&#xff1a; https://ext.…

Docker搭建个人网盘、私有仓库

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 [rootlocalhost ~]# doc…

1267. 统计参与通信的服务器

题目描述&#xff1a; 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能…

工控机驱动自助检票机,打造轨道交通的智慧未来!

随着城市化进程的加速和人口的不断增长&#xff0c;城市轨道交通建设正日益成为解决交通拥堵、提高交通工作效率的重要举措。然而&#xff0c;仅仅依靠传统的交通设施已经无法满足城市发展的需求&#xff0c;轨道交通智能系统建设成为了不可忽视的发展趋势。 AFC&#xff0c;即…

Git gui教程---第八篇 Git gui的使用 创建一个分支

一般情况下一个主分支下代码稳定的情况下会新建出一个分支&#xff0c;然后在分支上修改&#xff0c;修改完成稳定后再合并到主分支上。 或者几个人合作写一份代码&#xff0c;每个人各一个分支&#xff0c;测试稳定再合并到主分支上。 在git gui选择菜单栏“分支”&#xff0…

Linux之套接字UDP实现网络通信

Linux之套接字UDP实现网络通信 文章目录 Linux之套接字UDP实现网络通信1.引言2.具体实现2.1需要知道的套接字接口1.socket()2.bind()3.recvfrom()4.sendto() 2.2服务器端server.hpp2.3服务器端server.cc2.4客户端Client.cc 1.引言 ​ 套接字(Socket)是计算机网络中实现网络通信…

docker安装clickhouse

安装 docker安装 创建clickhouse目录 mkdir -P /data/clickhouse/datamkdir -P /data/clickhouse/confmkdir -P /data/clickhouse/log 拉取镜像 这里直接拉取最新镜像, 如果需要某个特定版本, 则再拉取的时候指定版本号即可. docker pull clickhouse/clickhouse-server 启动临…

Springboot实现ENC加密

Springboot实现ENC加密 1、导入依赖2、配置加密秘钥&#xff08;盐&#xff09;3、获取并配置密文4、重启项目测试5、自定义前缀、后缀6、自定义加密方式 1、导入依赖 关于版本&#xff0c;需要根据spring-boot版本&#xff0c;自行修改 <dependency><groupId>co…

STM32 CubeMX (第四步Freertos内存管理和CPU使用率)

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…

java maven项目打jar包发布(精简版)

目录 一、maven打包 二、安装jdk环境 三、安装mysql 四、jar包传输到服务器 一、maven打包 先clean再package target文件夹下面有生成一个jar包 二、安装jdk环境 1、下载jdk cd /usr/local wget https://repo.huaweicloud.com/java/jdk/8u201-b09/jdk-8u201-linux-x64.tar.…

RocketMQ消息存储

一、存储介质 ● 关系型数据库DB Apache下开源的另外一款MQ—ActiveMQ (默认采用的KahaDB做消息存储)可选用JDBC的方式来做消息持久化&#xff0c;通过简单的xmI配置信息即可实现JDBC消息存储。由于&#xff0c;普通关系型数据库(如Mysql)在单表数据量达到千万级别的情况下&a…