el-table每一行的回调方法及假删除真隐藏

news2024/11/17 16:28:40

html数据

<template>
  <el-table :data="tableData" :row-class-name="rowClassName">//每一行的回调方法
    <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="province" label="省份" width="120"></el-table-column>
    <el-table-column prop="city" label="市区" width="120"></el-table-column>
    <el-table-column prop="address" label="地址" width="300"></el-table-column>
    <el-table-column prop="zip"label="邮编" width="120"></el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template slot-scope="scope">
        <el-button @click.native.prevent="deleteRow(scope.$index ,scope.row)"
          type="text" size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

js数据

<script>
  export default {
    methods: {
      //每一行的回调方法
      rowClassName: function ({ row }) {
        if (row.showFlag==false) {
         //判断一下showFlag是不是等于false,如果是的话整条数据添加class为hidden-row的
         return "hidden-row";
        }
        return '';
      },
      deleteRow(index, row) {
        console.log(row)
        // rows.splice(index, 1);//真删除
        row.showFlag=false//假删除,showFlag=false
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          showFlag:true
        }]
      }
    }
  }
</script>

css

<style>
 .hidden-row {
   display: none !important;//隐藏
 
 }
::v-deep.hidden-row {
   display: none !important;//隐藏
 
 }
</style>

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

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

相关文章

Unknown encoder ‘libmp3lame

环境&#xff1a; macos m1 &#xff0c; python3.10.x 背景 做视频切片&#xff0c; 使用moviepy 中VideoFileClip进行截取视频。 报错&#xff1a; Unknown encoder libmp3lameThe audio export failed because FFMPEG didnt find the specified codec for audio encoding …

ArXiv| Graph-Toolformer: 基于ChatGPT增强提示以赋予大语言模型图数据推理能力

ArXiv| Graph-Toolformer: 基于ChatGPT增强提示以赋予大语言模型图数据推理能力. 来自加利福利亚大学戴维斯分校计算机科学系的IFM实验室发表在arXiv上的文章:“Graph-ToolFormer: To Empower LLMs with Graph Reasoning Ability via Prompt Augmented by ChatGPT”。 文章的…

Java 字符串 07 练习-手机号屏蔽、身份证号信息查看,游戏骂人敏感词替换

注意点&#xff1a;只有返回值才是被截取的小串&#xff0c;所以需要有一个变量去承接它&#xff1b; 自己写的代码&#xff1a; import java.util.Scanner; public class practice {public static void main(String[] args) {Scanner input new Scanner(System.in);String …

Mac Idea安装后无法启动

1、起因 想安装一个新版的idea2023.3.2&#xff0c;结果安装完之后直接无法启动 以为是卸载不干净&#xff0c;下载了一个腾讯柠檬&#xff0c;结果将2018版也一并卸载了 好家伙&#xff0c;彻底没得用 2、找原因 1&#xff09;查看idea报错信息 网上找了一圈&#xff0c;其…

架构篇28:业务高可用的保障-异地多活架构

文章目录 应用场景架构模式小结无论是高可用计算架构,还是高可用存储架构,其本质的设计目的都是为了解决部分服务器故障的场景下,如何保证系统能够继续提供服务。但在一些极端场景下,有可能所有服务器都出现故障。例如,典型的有机房断电、机房火灾、地震、水灾……这些极端…

nginx反向代理-负载均衡

nginx环境搭建 wget https://nginx.org/download/nginx-1.21.6.tar.gz&#xff08;下载nginx安装包&#xff09; tar -xvzf nginx-1.21.6.tar.gz&#xff08;解压缩&#xff09; yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel&#xff08;下载依赖库和…

[SwiftUI]Text对字符串中部分字符改变颜色和字体

如图&#xff0c;需要对字符串中部分字符改变颜色和字体。 在 SwiftUI 中合并带有不同样式的文本&#xff0c;应该使用不同的 Text 实例并将它们合并起来。将实例使用 运算符合并起来&#xff0c;每个 Text 实例都保持其自己的样式设置。这种方式可以正常编译并运行&#xff0…

Flutter 点击空白处关闭软键盘,点击非TextField 关闭软键盘的方法

1&#xff1a;点击空白处(非控件上)关闭软键盘。 此方法有个问题&#xff0c;就是点击非空白区域&#xff0c;不会关闭软键盘&#xff0c;比如点击旁边的其他按钮&#xff0c;则软键盘还在。只适合点击空白处关闭软键盘 在 main.dart 入口 build 中增加 builder: (context, ch…

“海洋天堂——助成长计划”走进安徽省科学技术馆

为了助力困境儿童、青少年有效地参与社会生活&#xff0c;培养他们团队精神&#xff0c;引导他们掌握社会规则&#xff0c;增强自信&#xff0c;合肥市庐阳区为民社会工作服务中心于2024年1月24日上午&#xff0c;组织有四名老师带领18名困境儿童、青少年&#xff0c;通过徒步、…

javaspring bootmysql疾病查询网站01548-计算机毕业设计项目选题推荐(附源码)

摘 要 随着互联网时代的到来&#xff0c;同时计算机网络技术高速发展&#xff0c;网络管理运用也变得越来越广泛。因此&#xff0c;建立一个B/S结构的疾病查询网站&#xff0c;会使疾病查询工作系统化、规范化&#xff0c;也会提高医院形象&#xff0c;提高管理效率。 本疾病查…

【PyTorch】记一次卷积神经网络优化过程

记一次卷积神经网络优化过程 前言 在深度学习的世界中&#xff0c;图像分类任务是一个经典的问题&#xff0c;它涉及到识别给定图像中的对象类别。CIFAR-10数据集是一个常用的基准数据集&#xff0c;包含了10个类别的60000张32x32彩色图像。在上一篇博客中&#xff0c;我们已…

5G时代下的融合CDN新风口

近年来&#xff0c;随着网络技术的飞速发展&#xff0c;互联网流量视频化的趋势日益明显&#xff0c;视频应用使互联网的可扩展性、可演进性、服务质量和网络安全面临诸多挑战。为克服传统IP网络在服务视频应用当中的不足&#xff0c;内容分发网络CDN被提出&#xff0c;并迅速成…

Linux系统——循环

一、循环 1.循环的含义 将某代码段重复运行多次&#xff0c;通常有进入循环的条件和退出循环的条件 重复运行次数 循环次数事先已知循环次数事先未知 常见的循环的命令&#xff1a;for, while, until for&#xff1a;已知次数&#xff1b;while&#xff0c;until&#xf…

鸿蒙HarmonyOS获取GPS精确位置信息

参考官方文档 #1.初始化时获取经纬度信息 aboutToAppear() {this.getLocation() } async getLocation () {try {const result await geoLocationManager.getCurrentLocation()AlertDialog.show({message: JSON.stringify(result)})}catch (error) {AlertDialog.show({message…

C#在图片上输出文字和保存

winform&#xff0c;图片控件&#xff0c;加载一个图片&#xff0c;在图片上输出文字&#xff1b; 输出文字的代码如下&#xff1b; private void pictureBox1_Paint(object sender, PaintEventArgs e){Graphics g1 e.Graphics;g1.DrawString("测试", this.Font, B…

centos7 挂载windows共享文件夹报错提示写保护

centos7挂载windows共享时&#xff0c;提示被共享的位置写保护&#xff0c;只能以只读方式挂载&#xff0c;紧接着就是以只读方式挂载失败 原因是组件少装了 yum install cifs-utils 安装完后&#xff0c;正常挂载使用。 下载离线安装包 下载离线包下载工具 下载离线安装包…

基本初等函数总结

常见数集 一些常见的数集 ✔非负整数集&#xff08;或自然数集&#xff09;&#xff0c;记作N&#xff1b; ✔正整数集&#xff0c;记作N*或N&#xff08;“”标在右下角&#xff09;&#xff1b; ✔整数集&#xff0c;记作Z&#xff1b; ✔有理数集&#xff0c;记作Q&#xff…

05-TiDB 之 HTAP 快速上手

混合型在线事务与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 功能 HTAP 存储引擎&#xff1a;行存 与列存 同时存在&#xff0c;自动同步&#xff0c;保持强一致性。行存 OLTP &#xff0c;列存 OLAPHTAP 数据一致性&#xff1a;作为一个分布式事务…

AWS CodeArtifact配置(Maven私有库)

问题 由于后台Java代码需要&#xff0c;发布jar到maven私有库后&#xff0c;另外一个Java项目&#xff0c;通过maven私有库再拉去这个jar使用。这里就需要部署一个maven私有库。 1. 创建域 打开CodeArtifact主页&#xff0c;开始创建域&#xff0c;如下图&#xff1a; 创建…

巨杉数据库携手广发证券入选2023大数据“星河”案例

近期&#xff0c;中国信息通信研究院、中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)连续七年共同组织的大数据“星河&#xff08;Galaxy&#xff09;”案例征集活动发布公示。本次征集活动&#xff0c;旨在通过总结和推广大数据产业发展的优秀成果&#xff0c;推动…