element-ui 表格使用多选如何回显打勾

最新推荐文章于 2024-10-22 11:37:09 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-10-22 11:37:09 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Maxueyingying/article/details/120768489

版权

vue 专栏收录该内容

98 篇文章 4 订阅

订阅专栏

项目需求: 选择表格中的数据点击按钮出现弹框,弹框中显示表格上所选中的数据.

点击弹框中的删除,该行数据删除,对应的表格上也要取消掉勾选.

在这里插入图片描述

表格渲染代码

  <el-table
        height="600"
        ref="myTable"
        v-loading="crud.loading"
        :header-cell-style="{ color: '#FFF', background: '#333' }"
        :cell-style="{ color: '#FFF', background: '#333' }"
        :data="crud.data"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
        :default-sort="{ prop: 'posName', order: '' }"
        @sort-change="sortChange"
      >
        <template slot="empty">
          <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
        </template>
        <el-table-column type="selection" width="55" />

表格中select事件：当用户手动勾选数据行的Chenckbox时触发的事件,有两个参数selection,row

回显需要的方法

勾选使用方法：toggleRowSelection(row,selected)，toggleRowSelection的第一个参数是选中的行数，第二个参数是否选中，true代表选中，false代表未选中。调用toggleRowSelection这个方法，需要获取真实dom 所以需要注册 ref 来引用它

清除勾选方法：clearSelection(),清除勾选的行数，需要获取真实dom 所以需要注册 ref 来引用它

this. $n e x t T i c k () 方法 : V u e 实现响应式并不是数据发生变化之后 D O M 立即变化，而是按一定的策略进行 D O M 的更新。$ nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，使页面渲染和获取的数据保持一致。

回显逻辑代码:

// 关闭弹窗
    close() {
      this.detailVisible = false;
      console.log(this.workOutData, "拿到删除后的值");
      // this.crud.selections = this.workOutData;
      this.$nextTick(() => {
        this.$refs.myTable.clearSelection(); //清除上一次的回显，不然修改后提交显示的页面和数据不一致
        this.workOutData.forEach((j, i) => {
          this.crud.data.forEach((v, i) => {
            if (j.partNumber === v.partNumber) {
              console.log(v, "选中的值");
              this.$refs.myTable.toggleRowSelection(v, true);
            }
          });
        });
      });
    },