vxe-table 表格多选框回显

1.弹框表格结构

<a-modal

          v-if="visibleQuality"

          title="请选择需要提高的能力素质要求"

          :maskClosable="false"

          :visible="visibleQuality && switchStatus"

          @ok="handleOkQuality"

          @cancel="handleCancelQuality"

          cancelText="取消"

          okText="确定"

          width="600px"

        >

          <a-spin :spinning="quaLoading" tip="加载中...">

            <vxe-table

              ref="qualityTable"

              row-id="id"

              :row-config="{ keyField: 'id', isHover: true }"

              :data="rowsQuality"

              :checkbox-config="checkboxConfig"

              width="600px"

              @checkbox-change="checkboxChange"

              @checkbox-all="checkBoxAll"

            >

              <vxe-column type="checkbox" width="60"></vxe-column>

              <vxe-column

                field="abilityContent"

                title="能力素质要求"

                width="240"

              >

                <template #header>

                  <span><span style="color: #f5222d">* </span> 能力素质要求</span>

                </template>

              </vxe-column>

              <vxe-column

                field="explain"

                title="能力素质要求说明"

                width="240"

              ></vxe-column>

            </vxe-table>

          </a-spin>

        </a-modal>

1. 数据

data() {

return {

   checkboxConfig: {}, // 默认选中

 }

}

1. 实现方法，首先要异步处理，等待数据加载完毕，再去回显

3.1 第一种方法：

ps:(重要提示)设置checkboxConfig默认选中第一次有效，第二次无效,处理：请求数据点击人员时候提前请求拿到数据，给能力素质弹框加v-if重新创建

    let arr = []

    this.qualityRows.map(v => {

      arr.push(v.abilityCode)

    })

    this.$nextTick(() => {

      this.checkboxConfig = {

        checkRowKeys: arr

      }

      this.checkboxConfig.checkRowKeys = arr

      // this.$set(this.checkboxConfig, 'checkRowKeys', arr)

    })

3.2 第二种方法：

// 第二种方法过滤得到新数组arr

    let arr = []

    if (this.rowsQuality && this.qualityRows) {

      this.rowsQuality.map(v => {

        this.qualityRows.map(item => {

          if (item.abilityCode === v.id) {

            arr.push(v)

          }

        })

      })

    }

    this.$nextTick(() => {

      this.$refs.qualityTable.clearCheckboxRow()

      this.$refs.qualityTable.setCheckboxRow(arr, true)

    })

3.3 异步处理和回显完整方法：（try,catch 配合async，await 异步处理）

async addQuality () {

  this.visibleQuality = true

  this.rowsQuality = []

  // 放在点击人员时候请求，这里注释掉

  this.quaLoading = true

  try {

    let params = {

      userId: this.currentRow.userId

    }

    let w = await Api.getAbility(params)

    this.rowsQuality = w.data // 需要选择的能力项弹框的表格数据

    this.quaLoading = false

    this.$nextTick(() => {

      if (this.rowsQuality.length === 0) {

        this.demandPersonRows[this.currentRowIndex].improveAbility = false

      }

    })

  } catch (err) {

    this.quaLoading = false

  }

  if (this.rowsQuality.length === 0) {

    this.$message.warning('未设置能力素质信息请联系管理员!')

  } else {

    // 设置checkboxConfig默认选中第一次有效，第二次无效,处理：请求数据点击人员时候提前请求拿到数据，给能力素质弹框加v-if重新创建

    // let arr = []

    // this.qualityRows.map(v => {

    //   arr.push(v.abilityCode)

    // })

    // this.$nextTick(() => {

    //   this.checkboxConfig = {

    //     checkRowKeys: arr

    //   }

    //   this.checkboxConfig.checkRowKeys = arr

    //   // this.$set(this.checkboxConfig, 'checkRowKeys', arr)

    // })

    // rowsQuality:需要选择的能力项弹框的表格数据(id)，qualityRows：第三个表格能力素质项表格数据(abilityCode)

    // 第一种方法过滤 得到条件item.abilityCode === v.id 为true 的新数组arr

    // let arr = this.rowsQuality.filter(v => {

    //   let flag = false

    //   this.qualityRows.map(item => {

    //     if (item.abilityCode === v.id) {

    //       return (flag = true)

    //     }

    //   });

    //   if (flag) {

    //     return true;

    //   }

    // })

    // 第二种方法过滤得到新数组arr

    let arr = []

    if (this.rowsQuality && this.qualityRows) {

      this.rowsQuality.map(v => {

        this.qualityRows.map(item => {

          if (item.abilityCode === v.id) {

            arr.push(v)

          }

        })

      })

    }

    this.$nextTick(() => {

      this.$refs.qualityTable.clearCheckboxRow()

      this.$refs.qualityTable.setCheckboxRow(arr, true)

    })

  }

}