场景

要实现的效果是

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

注：

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

实现

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

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

这里的

:data="bcglXiangXiList"

绑定的是在

bcglXiangXiList: [],

data中定义的数组字段。

然后在点击清空按钮时

            <el-buttontype="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一个空数组。

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

探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
push数组元素不渲染 vue_对vue中data的数组push无效
data (){ return { keys: [] } }, methods: { select (key) { this.keys.push(key) console.log(this.keys) ...
vue中常用的数组方法
文章目录 1. join() 2.push()和pop() 3.shift() 和 unshift() 4.reverse(); 5.sort(); 6.slice(); 7.splice(); 8. ...
Vue中如何删除数组中指定值
在做vue el-tree数组保存id时,用shift 函数发现总是删除数组的第一个,而非自己想要删除的那个 pid为数组,item.id为要删除的元素的值.1就是删除它自身. this.pid.sp ...
vue中向一个数组中的每一个对象里添加一个属性
val.fileNmeC = val.fileName.split('_')[0]val.ddc = val.fileName.split('_')[1].split(".")[1 ...
用JavaScript清空数组
Emptying an array is a common JavaScript task but too often I see the task performed in the incorrec ...
vue中v-for指令的使用之Vue知识点归纳(八)
本文章将描述 vue 指令 v-for 的基本使用 1 简述 vue 指令 v-for 用来操作 dom ,常用于数组元素的操作 2 案例 <!DOCTYPE html> <html ...
vue中搜索关键词,使文本标红
UserHead.vue中搜索框: <el-col :span="6" :offset="8" class=" ...
vue使用js遍历数组和对象
前言在vue中,遍历数组和对象的方式略有不同,不能完全以数组或对象的遍历方式给对方使用并获取数据.为了记录以及以后方便查看,现在对其进行整理. 数组遍历以数组 array = [1,2,3,4,5 ...

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

场景

实现

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

最新文章

热门文章