关于校园赛事2系统的主界面的部分代码

export default {
        name: "Home",
        data(){
            return{
                user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) :{},
                tableData: [],
                matchsData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                competitorName: "",
                competitorSex: "",
                competitorId: "",
                competitorAge:"",
                matchId:"",
                competitorPhone: "",
                headerBg: 'headerBg',
                form: {},
                dialogFormVisible: false,
                multipleSelection: [],
            }
        },
        created() {
            this.load()
        },
        methods:{
            load(){
                this.request.get("/competitors/page",{
                    params:{
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    this.tableData =  res.records
                    this.total = res.total
                })
                this.request.get("/matchs",{

                }).then(res => {
                    this.matchsData =  res.records

                })
            },
            reset(){
                this.competitorName = ""
                this.competitorSex = ""
                this.matchId = ""
                this.load()
            },
            handleAdd(){
                this.dialogFormVisible = true
                this.form = {}
            },
            hadnleEdit(row){
                this.form = Object.assign({},row)
                this.dialogFormVisible = true
            },
            delBatch(){
                let userIds = this.multipleSelection.map(v => v.userId) // 把对象保存纯ID数组
                this.request.post("/competitors/del/batch",userIds).then(res => {
                    if(res.data){
                        this.$message.success("批量删除成功")
                        this.load()
                    }else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            handleExcelImportSuccess(){
                this.$message.success("导入成功")
                this.load()
            },
            save(){
                this.request.post("/competitors",this.form).then(res => {
                    if(res){
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()
                    }else {
                        this.$message.error("保存失败")
                    }
                })
            },
            handleSelectionChange(val){
                console.log(val)
                this.multipleSelection = val
            },
            handleSizeChange(pageSize){
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.pageNum = pageNum
                this.load()
            },
        },
    }

这段代码定义了一些方法，用于处理用户与组件的交互。下面是每个方法的详细介绍：

- `load`：此方法用于加载数据。它会调用“request.get”方法来发送两个 GET 请求，一个到“/competitors/page”端点，另一个到“/matchs”端点。当请求成功时，会将返回的数据保存到“tableData”、“total”和“matchsData”中。

- `reset`：此方法用于重置表单。它会清空“competitorName”、“competitorSex”和“matchId”，然后调用“load”方法重新加载数据。

- `handleAdd`：此方法用于处理添加操作。它会将“dialogFormVisible”设置为 true，以显示表单对话框，并清空表单数据。

- `hadnleEdit`：此方法用于处理编辑操作。它接受一个参数“row”，表示当前行的数据。它会使用“Object.assign”方法将当前行的数据复制到表单中，并将“dialogFormVisible”设置为 true，以显示表单对话框。

- `delBatch`：此方法用于处理批量删除操作。它会使用“map”方法将选中的行转换为一个包含用户 ID 的数组，然后调用“request.post”方法发送一个 POST 请求到“/competitors/del/batch”端点，并传递用户 ID 数组作为参数。当请求成功时，会显示一个成功消息，并调用“load”方法重新加载数据。

- `save`：此方法用于保存表单数据。它会调用“request.post”方法发送一个 POST 请求到“/competitors”端点，并传递表单数据作为参数。当请求成功时，会显示一个成功消息，将“dialogFormVisible”设置为 false 以隐藏表单对话框，并调用“load”方法重新加载数据。

- `handleSelectionChange`：此方法用于处理选择变化。它接受一个参数“val”，表示当前选中的行。它会将选中的行保存到“multipleSelection”中。

- `handleSizeChange` 和 `handleCurrentChange`：这两个方法分别用于处理每页显示条数和当前页码的变化。它们都会更新相应的数据，并调用“load”方法重新加载数据。