当我们使用多选的时候 , 数据在不同的地方 , 分页又不能准确拿到 , 这个时候就要用:row-key了
<el-table
ref="multipleTable"
:data="gridData"
:row-key="getRowKey"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column property="userName" label="姓名" width="200" />
<el-table-column property="phone" label="电话" />
</el-table>
// 这里使用el-tag标签进行一个循环遍历出来
<el-tag v-for="(index,user) in userName" :key="index" closable @close="handle(user)">
{{ userName[user] }}
</el-tag>
data(){
return{
gridData: [], // 表格数据
userName: [],
}
},
methods(){
getRowKey(val) {
return val.userId
},
// 当数据发生改变时,数组的值也要随之发生改变
handleSelectionChange(val) {
const arr1 = []
val.forEach(item => {
arr1.push(item.userName + item.phone)
})
this.userName = arr1
},
// 当点击标签的关闭按钮时,清除掉数组的那一项(val是索引)
handle(val) {
this.userName.splice(val, 1)
},
}
row-key的这个方法ELement官网也做出了详细的解释
最后的效果图是这样的