• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 4小时前 1次浏览

场景

要实现的效果是

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

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

实现

首先将这个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一个空数组。

场景

要实现的效果是

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

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

实现

首先将这个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一个空数组。


程序员灯塔
转载请注明原文链接:Vue中实现清空数组和清空el-table
喜欢 (0)