element ui table左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中

最新推荐文章于 2024-03-01 16:11:18 发布

爱吃火腿的子车鸿轩

最新推荐文章于 2024-03-01 16:11:18 发布

阅读量675

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/weixin_39143969/article/details/123116136

版权

效果如下图所示：
在这里插入图片描述

//左侧代码：
<el-table
             ref="multipleTable"
              :data="userTableData"
              class="padding-table"
              style="width: 100%;"
              @selection-change="tableChangeFun">
                  <el-table-column
	type="selection"
	width="55">
</el-table-column>
<el-table-column
	prop="name"
	label="姓名">
</el-table-column>
                  <el-table-column
	prop="post"
	label="岗位">
</el-table-column>
</el-table>

//右侧代码
<div>
    已选用户：
</div>
<div v-if="multipleSelection">
    <span class="chooseUser" v-for="(item,index) in multipleSelection" :key="item.id">
        {{item.name}}
        <i class="el-icon-close fs_12 color-blue" @click="deleteItem(item,index)"></i>
    </span>
    
</div>

//方法
tableChangeFun(val){
    this.multipleSelection = val;
},
deleteItem(item,index){
    this.multipleSelection.splice(index,1);
    this.$refs.multipleTable.toggleRowSelection(item);
},

以上就是全部代码