vue+elementui实现表格默认选中(el-table)

实现效果

表格默认勾选指定的一行或多行

代码实现——HTML部分

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

<el-table
            ref="dataTable"
            :data="dataList"
            border
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column
                type="selection"
                header-align="center"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                prop="userName"
                header-align="center"
                align="center"
                label="用户昵称">
            </el-table-column>
            <el-table-column
                prop="mobile"
                header-align="center"
                align="center"
                label="手机号">
            </el-table-column>
        </el-table>

代码实现——JS部分

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

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

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

方法:

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