el-table multipleTable selection勾选框选中获取列表内容并动态渲染

今天写bug中遇到一个技术难点 如下图所示

项目要求是选中勾选框 将他的内容拿到并渲染在页面上------核心思想就是利用ref传值，然后渲染内容。仔细阅读文章会发现这个问题很容易解决【如果帮到你请点个赞哈】

第一步给el-table添加ref

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark">
   <el-table-column type="selection" width="55"> </el-table-column>

二然后写方法用refs接收

  saveBautton() {
      let _this = this;
      //拿到的值赋值给变量refs
      let refs = _this.$refs.multipleTable.selection;
      // 弹框点击显示
      _this.alterTissue = true;
      // refs值赋值给数组
      _this.gxk = refs;//gxk是数组的命名
    },

三渲染勾选框

    <li v-for="(v, i) in gxk" :key="i">
              <!-- li文字 -->
              <p>
                <span>{{ v.date }}</span> &nbsp;&nbsp;&nbsp;<span>{{ v.name }}</span> /
                <span>{{ v.state }}</span>
              </p>
              <!-- li关闭图标 -->
              <p class="zuUlImg">
                <img src="../../../assets/img/SysManger/close.png" alt="" />
              </p>
            </li>

效果如下图所示将gxk渲染在页面（弹框）