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的值,我想要获取每一行数据,截图如下:
前端控制台,格式也都看过了,主要是获取不出来,this.multipleSelection[0].sid或者this.multipleSelection[0].getSid都不能获取到sid的值,最后console.log((this.multipleSelection[0])['sid']);就可以打印出来了,好奇怪。。。