鍍金池/ 問答/HTML/ vue表格含有一列多選框,如何獲取被選中的行的數(shù)據(jù)?

vue表格含有一列多選框,如何獲取被選中的行的數(shù)據(jù)?

1.仿照element-ui官網(wǎng)貼出的demo,table表格多選,選擇多行數(shù)據(jù)時使用 Checkbox。但是無法獲取this.multipleSelection的值。相關(guān)代碼如下:
<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="人數(shù)" sortable width="90px"></el-table-column>
                    <el-table-column prop="sfield" label="擅長領(lǐng)域" sortable width="120px"></el-table-column>
                    <el-table-column prop="sprocess" label="階段" sortable width="90px"></el-table-column>
                    <el-table-column prop="stimes" label="參與次數(shù)" sortable width="120px"></el-table-column>
                    <el-table-column prop="sgrade" label="信譽度" sortable width="95px"></el-table-column>
                    <el-table-column label="聯(lián)系方式" width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>電話: {{ scope.row.stel }}</p>
                                <p>郵箱: {{ scope.row.smail }}</p>
                                <p>地址: {{ scope.row.sadd }}</p>
                                <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 }}</p>
                                <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)">發(fā)消息</el-button>
                            <el-button size="small" type="success" @click="handleLike(scope.$index, scope.row)">喜好</el-button>
                        </template>
                    </el-table-column>
                </el-table>

2.數(shù)據(jù)區(qū)也已經(jīng)添加multipleSelection: [],
3.響應(yīng)函數(shù):handleSelectionChange21:function (val) {//用于監(jiān)聽是否選中當前行

            this.multipleSelection = val;
        },

4.表格外一按鈕負責獲取被選中行的信息

        sendMessageSelected:function () {//群發(fā)消息
            //循環(huán)遍歷被選中的行,獲得sid,發(fā)送消息
                alert(this.multipleSelection);
        },

5.此時不知道怎么獲取this.multipleSelection的值,我想要獲取每一行數(shù)據(jù),截圖如下:

clipboard.png

回答
編輯回答
囍槑

1、handleSelectionChange21 這個函數(shù)行參返回的是數(shù)組嵌對象的格式,如果你需要獲取每行的數(shù)據(jù),你要循環(huán)這個數(shù)組。其實很簡單,你直接先console一下這個val,看下數(shù)據(jù)格式是怎么樣就好了。

2018年8月2日 14:53
編輯回答
解夏

前端控制臺,格式也都看過了,主要是獲取不出來,this.multipleSelection[0].sid或者this.multipleSelection[0].getSid都不能獲取到sid的值,最后console.log((this.multipleSelection[0])['sid']);就可以打印出來了,好奇怪。。。

2017年7月4日 04:20