The vue table contains a column of multiple checkboxes. How can I get the data for the selected row?

1. Imitate the demo,table table posted on the official website of element-ui to select multiple selections, and use Checkbox when selecting multiple rows of data. But cannot get the value of this.multipleSelection. The related code is as follows:
< el-table ref= "studentAllTable": data= "studentAllData" stripe border: default-sort = "{prop: "sgrade", order:" ascending"}" @ selection-change= "handleSelectionChange21" @ row-click= "handleclick21": row-class-name = "tableRowClassName21" style= "position:relative;top:5px;" height= "600" >

                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="sid" label="Id" sortable show-overflow-tooltip v-if="false"></el-table-column>
                    <el-table-column prop="sname" label="" sortable show-overflow-tooltip></el-table-column>
                    <el-table-column prop="sgender" label="" sortable width="80px">
                        <template scope="scope">
                            <span v-if="scope.row.sgender === 0"></span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sbirth" label="" sortable width="120px"></el-table-column>
                    <el-table-column prop="sorganization" label="" sortable width="90px">
                        <template scope="scope">
                            <span v-if="scope.row.sorganization === 0"></span>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sperson" label="" sortable width="90px"></el-table-column>
                    <el-table-column prop="sfield" label="" sortable width="120px"></el-table-column>
                    <el-table-column prop="sprocess" label="" sortable width="90px"></el-table-column>
                    <el-table-column prop="stimes" label="" sortable width="120px"></el-table-column>
                    <el-table-column prop="sgrade" label="" sortable width="95px"></el-table-column>
                    <el-table-column label="" width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                

: {{ scope.row.stel }}

: {{ scope.row.smail }}

: {{ scope.row.sadd }}

<div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.stel }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="" width="120"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p style="width: 500px;">: {{ scope.row.sdescription }}

<div slot="reference" class="name-wrapper"> <el-tag size="medium"></el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label=""> <template scope="scope"> <el-button size="small" type="primary" @click="handleSendMessage(scope.$index, scope.row)"></el-button> <el-button size="small" type="success" @click="handleLike(scope.$index, scope.row)"></el-button> </template> </el-table-column> </el-table>

2. MultipleSelection: [],
3 has also been added to the data area. Response function: handleSelectionChange21:function (val) {/ / is used to listen to whether the current line is selected

            this.multipleSelection = val;
        },

4. The extra button in the table is responsible for getting the information of the selected row

        sendMessageSelected:function () {//
            //sid
                alert(this.multipleSelection);
        },

5. At this point, I don"t know how to get the value of this.multipleSelection. I want to get each row of data. The screenshot is as follows:

clipboard.png

Feb.28,2021

1, handleSelectionChange21 this function line parameter returns the format of the array embedded object, if you need to get each row of data, you need to loop the array. In fact, it's very simple. Just console the val, to see what the data format is.


front-end console, the format has also been seen, mainly can not be obtained, this.multipleSelection [0] .sid or this.multipleSelection [0] .getSid can not get the value of sid, and finally console.log ((this.multipleSelection [0]) ['sid']); can be printed out, very strange.

Menu