首页 > 其他分享 >Element-动态控制el-table的行的显示与隐藏

Element-动态控制el-table的行的显示与隐藏

时间:2023-07-11 21:33:33浏览次数:35  
标签:el index Element 动态控制 table hidden row

<el-table border stripe :data="form.serialDateList" style="width: 100%" :row-class-name="rowClassName">  // rowClassName
  <el-table-column type="index" width="60" align="center" label="序号" />
    
  <el-table-column min-width="100" align="center" label="操作">
     <template #default="{$index}">
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delSerialItem($index)" />
     </template>
  </el-table-column>
  
</el-table>

。。。
<script>
  methods: {
    delSerialItem(index) {
      // this.form.serialDateList.splice(index, 1)  // 方式一:硬删除
      this.form.serialDateList[index].delFlag = 1;  // 方式二:软删除
    },
  
    // 行的样式控制方法,通过这个回调方法控制隐藏显示
    rowClassName: function ({ row }) {
      if (row.delFlag !== 0) {
        return "hidden-row";
      }
      return '';
    },
  },
</script>

。。。
<style lang="scss">
  .el-table .hidden-row {
    display: none;
  }
</style>

 

标签:el,index,Element,动态控制,table,hidden,row
From: https://www.cnblogs.com/qq2806933146xiaobai/p/17545993.html

相关文章

  • laraveladmin 上传图片通过filesystems到其他网站提供的接口
    要通过Laravel的Filesystems将图片上传到其他网站提供的接口,可以按照以下步骤进行操作:首先,确保你已经在Laravel中配置好了Filesystems。你可以在config/filesystems.php文件中定义一个新的磁盘配置,用于上传图片到其他网站的接口。'disks'=>[//其他磁盘配置.........
  • 使用selenium、xpath、半自动点赞、自动登录
    selenium等待元素加载#程序执行速度很快---》获取标签---》标签还没加载好---》直接去拿会报错#显示等待:当你要找一个标签的时候,给它单独加等待时间#隐士等待:只要写一行,代码中查找标签,如果标签没加载好,会自动等待 bro.implicitly_wait(10)selenium元素操作#输入框输......
  • 通达信金融终端解锁Level-2功能 续二 (非法调试 I say NO)
    图一:1. 破解后的逐笔分析可以不受条件正常运行。2. 打开调试,被防止非法调试代码阻拦。3. 只好关闭调试。4.立马spell符文"ShipSheep,CheapChips,ShiftShit,BullRed"5. 再次打开调试,受到符文回路解放,调试白给。    图二:1. 白给调试后,重新刷新页面2.......
  • 爬取新闻 ,bs4, css选择器,selenium基本使用
    目录1爬取新闻2bs4介绍遍历文档树3bs4搜索文档树3.2其他用法4css选择器5selenium基本使用5.1模拟登录百度6selenium其他用法6.1无头6.2搜索标签1爬取新闻#1爬取网页---requests#2解析 ---xml格式,用了re匹配的 ---html,bs4,lxml。。。---json: -python......
  • selenium、xpath、打码平台
    目录1selenium等待元素加载2selenium元素操作3selenium执行js4selenium切换选项卡5selenium前进后退,异常处理6selenium登录cnblogs7抽屉半自动点赞8xpath使用9动作链10自动登录1230611打码平台12打码平台自动登录1selenium等待元素加载#程序执行速度很快---》获取......
  • bitfield
    bitfield作用位域修改溢出控制原理通过对redis字符串二进制形式进行操作,通过改变其值的作用更具体将一个Redis字符串看作是一个由二进制位组成的数组.并能对变长位宽和任意没有字节对齐的指定整型位域进行寻址和修改常用命令BITFILDkey[GETtypeofset]BITFIEL......
  • CF865D Buy Low Sell High
    CF865DBuyLowSellHigh我发现自己是真的学不会贪心……太玄学了。这是一道反悔贪心的题目,比较简单的那种。题意你是一棵韭菜,喜欢炒股,每天可以买入一股或卖出一股,且最后一天之后你持有的股票数目应该为\(0\)。你现在知道\(n\)天的股票价格,求最大获利。思路首先一个很显......
  • IntelliJ IDEA 最受欢迎的插件有哪些
    IntelliJIDEA是一款功能强大的集成开发环境,支持众多插件扩展。以下是一些在IntelliJIDEA中广受欢迎的插件:Lombok:简化Java代码的编写,自动生成getter、setter、构造函数等常用代码。GitIntegration:提供与Git版本控制系统的集成,方便代码的提交、分支管理和代码审......
  • IntelliJ IDEA 最受欢迎的插件有哪些
    IntelliJIDEA是一款功能强大的集成开发环境,支持众多插件扩展。以下是一些在IntelliJIDEA中广受欢迎的插件:Lombok:简化Java代码的编写,自动生成getter、setter、构造函数等常用代码。GitIntegration:提供与Git版本控制系统的集成,方便代码的提交、分支管理和代码审......
  • 《设计模式的运用》使用策略模式+工厂模式优化代码中的if else
    使用策略模式优化ifelse有这样一段逻辑function{for{if()if()if(if())...}}公司有的祖传的代码,是一段规则校验,校验的越多,每一个请求都会进来校验,加上后来的开发人员也......