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一個空數組。