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

╰+攻爆jí腚メ 2022-02-24 12:56 101阅读 0赞

前端框架：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);//同时取消表格中对应行的勾选状态
            }
        }
    },

表格

![20190404103703672.PNG][]

tag

![2019040410383536.PNG][]

[20190404103703672.PNG]: /images/20220224/98ae13b564ec4fb69476ad90bb06cb35.png
[2019040410383536.PNG]: /images/20220224/5dbdaba08c584a7fa5a87c17f626a77c.png