element 表格翻页多选，并与tag标签相关联，tag标签可初始化

前端框架：vue
控件：elment

1.表格
<el-table
    ref="multipleTable2"
    :data="tableData2"
    :row-key="getRowKeys"
    border
    style="width: 100%"
    <%--@row-click="handleSelectionChange4"--%>
    @selection-change="toggleSelection4">
    <el-table-column
            prop="id" label="pk" type="selection" width="55" :reserve-selection="true">
    </el-table-column>
    <el-table-column
            prop="num"
            label="序号"
            width="50">
    </el-table-column>
    <el-table-column
            prop="real_name"
            label="姓名">
    </el-table-column>
    <el-table-column
            prop="user_name"
            label="登录名">
    </el-table-column>
    <el-table-column
            prop="orgname"
            label="所在部门">
    </el-table-column>
</el-table>

2.tag
<el-tag class="tag-selected-item"
        :key="tag.id"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
    {{tag.real_name}}
</el-tag>

data: {
  tableData2：[],//表格数据
  dynamicTags:[],//选择tags

//表格翻页多选
getRowKeys:function(row){
    return row.id;
},
//初始化标签，并勾选表格对应行数据，
showZzjg: function() {
    if(this.bkdw_id!=null && this.bkdw_id.length>0) {//判断带入的标签是否为空
        this.dynamicTags.push({id:this.bkdw_id,num:'',real_name:this.bkr,user_name:'',orgname:''});//初始化
        this.$refs.multipleTable2.toggleRowSelection(this.dynamicTags[0],true);选中表格中与标签对应的行数据
    }
}
// 鼠标勾选表格操作，并将勾选的行数据带入到标签中
toggleSelection4:function(val) {
    this.dynamicTags=[];
    for(var i = 0;i<val.length;i++) {
        this.dynamicTags.push(val[i]);//直接push表格数据对象，这样就可以方便将两个数据进行关联，如方法：handeleClose
    }
},
//删除tag
handleClose:function(tag) {
    for(var i=0;i<this.dynamicTags.length;i++){
        if (tag.id === this.dynamicTags[i].id){//以id作为key进行比对
            this.dynamicTags.splice(i, 1);//删除对应id的tag
            this.$refs.multipleTable2.toggleRowSelection(tag,false);//同时取消表格中对应行的勾选状态
        }
    }
},

表格

 tag