Vue 通过id回显el-table表格对应行选中

实现效果

代码实现——HTML部分

用elementUi的组件el-table，设置type的属性为selection

代码实现——JS部分

首先拿到表格中的默认数据——判断后端给的默认接口返回的数据id与表格中的数据id是否一致
通过调用toggleRowSelection方法，实现选中
this.refs.dataTable.toggleRowSelection(表格默认的数据，true)

               this.$http({
                    url: ' ', //后端提供的接口
                    method: 'get'
                }).then(({data}) => {
                    let arr= []
                    this.tableData.forEach((item) => {
                        data.data.forEach(val => {  //遍历接口返回的id数组
                            if (val.id=== item.id) {
                                list.push(item)
                            }
                       })
                    })
                    if (arr) {
                        list.forEach((row) => {
                          this.$refs.dataTable.toggleRowSelection(row, true)
                        })
                    }
                })

提示: 主要是要知道表格中的哪一行需要被默认选中，再将数据放入方法中即可

方法:

1. 创建一个空数组，用来存放默认数据 (默认数据可能不止一个，用数组存放)
2. 遍历表格的数据，再遍历后端给的接口数据，两者id一致（不一定是要id，两者之间共同的标识即可，一般以id做判断）
3. 把判断出来的默认表格数据push到创建的数组中
4. 再遍历数组，将数据放入方法中