element-ui table check box to determine whether it is selected or not selected and the filling of the default value

1. The check box of element-ui table determines the selected state

You can use the select event to make judgments  in the events provided by the table component on the  element-ui official website.

The specific code is as follows:

<el-table
    ref="videoEnterpriseList"
    :data="list1"
    style="width: 100%"
    @select="handleSelection"
>
    <el-table-column type="selection" width="50px" />
</el-table>

handleSelection(selectionArr, item) {
    const self = this
    // selectionArr-勾选的数据
    // item-当前点击的数据
    // 在selectionArr中寻找item，checkedVal = false未选中，checkedVal  = true 选中
    const checkedVal = selectionArr.find(x => x.cameraId === item.cameraId)
    const sIndex = self.selection.indexOf(item.cameraId)
    if (!checkedVal) {
        // 未选中要做的事情
        if (sIndex > -1) {
          self.selection.splice(sIndex, 1)
        }
    } else {
        // 选中要做的事情
        if (sIndex > -1) {
          self.selection.push(item.cameraId)
        }
    }
}

2. Fill in the checkbox default value of element-ui table

The table component in the element-ui official website  provides the toggleRowSelection method to backfill the data of the check box

 The specific usage code is as follows:

1. Note: If the current list data is paginated, then the selected data id set is all the selected data, not the selected data id set on the current page.

data() {
    return {
        list: [], // 列表当前数据
        listChecked: [] // 列表选中数据id集合
    }
}

 2. Compare the current list data with the selected id set. If the id exists, use the toggleRowSelection method to select it.

this.list1.forEach(x => {
    if (this.selection.indexOf(x.cameraId) > -1) {
        this.$refs.videoEnterpriseList.toggleRowSelection(x, true)
    }
})