el-table（type=“selection“）多选框两种回显

目录

一、前端数据回显（页面间数据展示）

1、图篇帮助理解

2、描述：

3、代码

4、两个API，一个v-model

二、数据库数据回显

 1、描述：

2、核心代码:

3、比较完整代码：(这是element ui官方文档上的)

4、改动过的，更加适应现实场景的代码：

    几个注意点：

---

一、前端数据回显（页面间数据展示）

1、图篇帮助理解

2、描述：

 被选择的el-table多选框行数据，以此显示在另一张页面上，类似v-model，实时展示。

    在不了解row-ley,reserve-selection这两个el-table方法之间，为了实现页面间数据回显必然会走些弯路。把简单的操作复杂化了。

3、代码

4、两个API，一个v-model

集中在三行代码上，两个API，一个v-model就能让带多选框el-table （页面a）选中的数据展示在另一个页面（页面b）上，【而且（重点）删除另一个页面（b）删除或者添加的时候，可以反作用于页面（a）】。因此，我称之为页面间数据的回显。

 

二、数据库数据回显

 1、描述：

这应该算是真正意义上的回显了。通过调用后端接口获取数组，然后将这些数据回显到el-table的多选框上。

2、核心代码:

this.$refs.multipleTable.toggleRowSelection(row, true)

3、比较完整代码：(这是element ui官方文档上的)

4、改动过的，更加适应现实场景的代码：

    几个注意点：

   1、使用this.$refs.multipleTable.toggleRowSelection(row, true)的时候，传入的row是关联此el-table的data数组中的元素。

   2、数据库数据回显，调用this.$refs.multipleTable.toggleRowSelection(row, true)方法的时候，必须实在el-table挂在完成之后才会起作用，因此eement ui的在页面中使用this.$refs.multipleTable.toggleRowSelection(row, true)，是通过添加点击事件来实现的。那么怎么省去点击事件，让其挂在完自动回显，需要找准时机。