怎么做到element-ui的table表格的多选框默认选中

 更新时间:2020年10月16日 13:30  
场景分析:进入页面编辑表格的时候,表格的多选框后台记住勾选的处于默认选中状态。解决办法:可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选代码

场景分析:

进入页面编辑表格的时候,表格的多选框后台记住勾选的处于默认选中状态。

解决办法:

可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选

代码如下:

<dg-table ref="multipleSpace" :data="tableCom" height="500" multiple border highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
        <dg-table-column align="center" width="55" type="selection" />
        <dg-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="60" type="index" />
        <dg-table-column prop="name" :label="$t('productbom.parts')">
          <template slot-scope="scope">
            <span>{{ scope.row.component_name }}</span>
          </template>
        </dg-table-column>
        <dg-table-column prop="item_l" width="60" :label="$t('productbom.length')">
          <template slot-scope="scope">
            <span>{{ scope.row.item_l }}</span>
          </template>
        </dg-table-column>
        <dg-table-column prop="item_w" width="60" :label="$t('productbom.weight')">
          <template slot-scope="scope">
            <span>{{ scope.row.item_w }}</span>
          </template>
        </dg-table-column>
</dg-table>


nextTick(),是将回调函数延迟在下一次dom更新数据后调用,

简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,

this.$nextTick(() => {
        this.tableCom.forEach(row => {
          this.$refs.multipleSpace.toggleRowSelection(row, true);
        })
      })

这里必须放在nextTick里面,要不然第一次打开会提示 报错