element table 多选获取数据后默认勾选状态

593 阅读1分钟
    // 表格基本配置
   <el-table
      :data="dataList"
      border
      size="medium"
      height="350"
      v-loading="loading"
      :row-key="getRowKeys"
      reserve-selection
      stripe
      ref="myTable"
      @selection-change="handleSelectionChange"
    >
    // 状态多选 加上:reserve-selection="true 分页多选
    <el-table-column type="selection" width="55" :reserve-selection="true">
    
    // methods 中设涉及方法
    
    init(row) {
      this.transformList = row;
      this.refreshList();
      this.visible = true;
    },
    
    // 获取数据完成后执行默认选择操作
    
    refreshList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("Api/support"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          pageSize: this.limit,
          ...this.searchForm,
        }),
      }).then(({ data }) => {
        if (data.code === 0 && data.msg === "success") {
          this.dataList = data.page.list;
          this.dataList = this.dataList.map((ele) => {
            ele.isSelected = this.transformList.find(
              (val) => val.materialId == ele.materialId
            )
              ? true
              : false;
            return ele;
          });
          
          // 设置默认勾选
          
          this.$nextTick(() => {
            this.dataList.forEach((element) => {
              if (element.isSelected) {
                this.$refs.myTable.toggleRowSelection(element, true);
              } else {
                this.$refs.myTable.toggleRowSelection(element, false);
              }
            });
          });
          this.total = data.page.total;
        } else {
          this.$message.warning(data.msg);
        }
        this.loading = false;
      });
    },