Vue中实现清空数组和清空el-table

布满荆棘的人生 2023-10-06 13:54 22阅读 0赞

## 场景 ##

要实现的效果是

![20200730171449312.gif][]

那么就要用到怎样将这个el-table清空，即在vue中怎样将数组清空。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

首先将这个el-table与一个数组实现双向绑定

<el-table
              v-loading="loading"
              :data="bcglXiangXiList"
              :row-class-name="rowClassName"
              @selection-change="handleDetailSelectionChange"
              ref="tb"
            >

这里的

:data="bcglXiangXiList"

绑定的是在

bcglXiangXiList: [],

data中定义的数组字段。

然后在点击清空按钮时

<el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="handleDeleteAllDetails"
                >清空</el-button>

对应的方法中

//清空子表数据
        handleDeleteAllDetails() {
          this.bcglXiangXiList = undefined;
        },

直接将此数组重新赋值为undefined

这样就能实现数组和el-table清空了。

当然这是在后面bcglXiangXiList 没有再用到的情况下

如果后面再用到的话直接使用会提示undefined

所以如果后面还用到的话可以

this.bcglXiangXiList = undefined;

之后再

this.bcglXiangXiList = new Array();

重新new一个空数组。

[20200730171449312.gif]: https://img-blog.csdnimg.cn/20200730171449312.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue】项目dialog组件数据项清空

目录一、重置myParams 二、this.$refs\["name"\].resetFields() 1、使用v-if 然后渲染, 无效 2、使用nextTick,

你的名字/ 2024年03月22日 13:12/ 0 赞/ 53 阅读

相关清空数组的方法

直接置空堆内存中的值其实没变。 var b = [1, 2, 3, 4]; var a = b; a = [];

刺骨的言语ヽ痛彻心扉/ 2024年03月17日 23:39/ 0 赞/ 81 阅读

相关 JavaScript 清空数组的方法大全

JavaScript 清空数组的方法大全文章目录 JavaScript 清空数组的方法大全 0、常用 1、使用 \`splice\

我会带着你远行/ 2024年02月25日 06:14/ 0 赞/ 116 阅读

相关 Vue中实现清空数组和清空el-table

场景要实现的效果是 ![20200730171449312.gif][] 那么就要用到怎样将这个el-table清空，即在vue中怎样将数组清空。注：博客：

布满荆棘的人生/ 2023年10月06日 13:54/ 0 赞/ 23 阅读

相关清空选中_回收站清空了怎么恢复？

回收站清空了文件怎么恢复？回收站里的文件被删除了，如何还原删除的文件呢？被Shift+Delete彻底删除的文件如何恢复呢？本文将详细介绍误删除文件恢复方法，清空了回收站也可以

系统管理员/ 2023年01月07日 08:47/ 0 赞/ 190 阅读

相关 js清空数组的正确做法

> Emptying an array is a common JavaScript task but too often I see the task performed i

悠悠/ 2022年07月14日 02:49/ 0 赞/ 163 阅读

相关 JavaScript中清空数组的三种方式

方式1，splice var ary = \[1,2,3,4\]; ary.splice(0,ary.length); console.log(ary); // 输出 \[\

水深无声/ 2022年05月10日 12:46/ 0 赞/ 202 阅读

相关 JS清空数组的三种方式

方式1，splice <table> <tbody> <tr> <td> <p>1</p> <p>2</p> <p>3</p> </td> <td>

小灰灰/ 2022年04月14日 20:18/ 0 赞/ 255 阅读

相关 javascript中清空数组的三种方式

1、splice var arr1=new Array();//创建数组 var arr=[1,2,3,4]; arr.splice(0,arr.lengt

朴灿烈づ我的快乐病毒、/ 2022年01月05日 02:28/ 0 赞/ 248 阅读

相关 JavaScript 清空数组的四种方法

var arr = [1, 2, 3] 1. length (推荐) arr.length = 0 2. splice arr

ゝ一世哀愁。/ 2021年09月18日 07:54/ 0 赞/ 345 阅读