vue表格含有一列多选框,如何获取被选中的行的数据?

1.仿照element-ui官网贴出的demo,table表格多选,选择多行数据时使用 Checkbox。但是无法获取this.multipleSelection的值。相关代码如下:
<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">
                                <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)">发消息</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.响应函数:handleSelectionChange21:function (val) {//用于监听是否选中当前行

            this.multipleSelection = val;
        },

4.表格外一按钮负责获取被选中行的信息

        sendMessageSelected:function () {//群发消息
            //循环遍历被选中的行,获得sid,发送消息
                alert(this.multipleSelection);
        },

5.此时不知道怎么获取this.multipleSelection的值,我想要获取每一行数据,截图如下:

clipboard.png

阅读 31.7k
2 个回答

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

1、handleSelectionChange21 这个函数行参返回的是数组嵌对象的格式,如果你需要获取每行的数据,你要循环这个数组。其实很简单,你直接先console一下这个val,看下数据格式是怎么样就好了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题