TS+VUE2的el-table表格默认勾选

1.首先获取表格数据，把需要的数据过滤出来放到新数组里

  private async loadParams() {
    let res = await GetAllEquTagsById(this.flowmeterId)
    this.defaultChoose = res.filter((item) => {
      return item.paramCode == 'Presetvalue_W_01' || item.paramCode == 'Flowrate_01' || item.paramCode == 'Sum_low_01' || item.paramCode == 'Realvalue_01'
    })
  }

2.点击按钮，打开组件，调用方法，把处理好的带着数据的新数组传过去

 private async chooseParams() {
    await this.loadParams()
    if (this.params.length === 0) {
      this.params = this.defaultChoose
    }
    await (this.$refs.paramDialog as chooseFlowmeterParams).showDialog(this.flowmeterId, this.params)
  }

3.子页面的方法（需要默认勾选的组件页面）

  public async showDialog(flowmeterId: string, defaultParams: any[]) {
    this.flowmeterId = flowmeterId
    this.dialogVisible = true
    await this.loadParams()
    await this.$nextTick()
    // window.console.log('showDialog:', this.allParams, defaultParams)
    //如果没有勾选的数据
    if (defaultParams.length < 1) {
      this.allParams.forEach((element: TagParamEntity) => {
        //parameCodeList就是需要默认勾选的一些数据的关键词
        //进行匹配
        let findInDefault = this.parameCodeList.find((o) => o === element.paramCode)
        // console.log('没有默认选择paramName', findInDefault)
        //根据条件 让某些行选中
        if (findInDefault) {
          ;(this.$refs.multipleTable as any).toggleRowSelection(element)
        }
      })
    } else {
      //如果有传来的数据，遍历数据源
      //this.allParams是展示表格用的接口的数据
      this.allParams.forEach((element: TagParamEntity) => {
        //根据传来的数据的id和数据源里的id匹配
        let findInDefault = defaultParams.find((o) => o.id === element.id)
        //找到匹配的数据了
        if (findInDefault) {
          //调用toggleRowSelection方法，勾选上
          ;(this.$refs.multipleTable as any).toggleRowSelection(element)
        }
      })
    }
  }

//具体实现方法：

//父组件
<chooseFlowmeterParams @onSure="onChooseParams" :params="params" @onCancel="onCancelChooseParams" ref="paramDialog" />

下面全是子组件： 

  <!--当选择项发生变化时会触发该事件 selection-change -->

  <!--当某一行被点击时会触发该事件 row-click -->

 <el-table size="small" ref="multipleTable" header-row-class-name="monitorTable" stripe :data="tableData" height="340" highlight-current-row @selection-change="tableChooseChange" @select-all="onSelectAll" @row-click="rowFinanceChecked" tooltip-effect="dark" border style="width: 100%">
        <!-- 选择框 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 内容 -->
        <el-table-column prop="paramName" :label="$t('i18n.param')"></el-table-column>
      </el-table>

  @Prop({
    default: () => {
      return []
    }
  })
  params: any[]

@Watch('params', { deep: true, immediate: true })
  private async watchParamsChange(val: any) {
    this.allSelectedArr = val
  }
  private allSelectedArr: any[] = []


  private async rowFinanceChecked(e) {
    //如果有 勾选的数据源 
    if (this.allSelectedArr.length != 0) {
       //如果 勾选的数据源中有一个选项 和 点击的行数据相同
      if (this.allSelectedArr.findIndex((item) => item.id == e.id) > -1) {
        //相同的勾选的数据 删掉
        this.allSelectedArr.splice(this.allSelectedArr.findIndex((item) => item.id == e.id), 1)
      } else {
         //如果 勾选的数据源中有一个选项 和 点击的行数据 不匹配，就是没有，并且小于6条
        if (this.allSelectedArr.length < 6) {
          //把点击的塞进allSelectedArr
          this.allSelectedArr.push(e)
            //然后勾选
          ;(this.$refs.multipleTable as any).toggleRowSelection(e)
        } else {
          this.$message({
            message: '参数最多选择6个',
            type: 'warning'
          })
        }
      }
    } else {
        //如果 之前没有默认勾选的数据源
        //往allSelectedArr这个数组里加进去
      this.allSelectedArr.push(e)
        //然后点击的全勾上
      ;(this.$refs.multipleTable as any).toggleRowSelection(e)
    }
  }

  private async tableChooseChange(val: any) {
     //val是点击的行的数据的集合，[ {},{} ] 勾了几个数据，都会村存里面
    if (val.length > 6) {
      this.$message({
        message: '参数最多选择6个',
        type: 'warning'
      })
      ;(this.$refs.multipleTable as any).toggleRowSelection(val[val.length - 1])
    }
        //存放数据
      this.currentSelectedRows = val
    }
  }