page de propagation à sélection multiple de la table ui de l'élément

1. Attributs principaux

clé unique

:row-key="rowKeyInit"
est configuré pour donner à chaque ligne un identifiant unique
@ rowKeyInit(row) { return row.recordId },

choisi

Définissez selection-change="handleSelectionChange" dans le tableau

handleSelectionChange(arr) {
    
    
      // console.log(arr)
      let selectArray = []
      if (arr && arr.length > 0) {
    
    
        selectArray = arr.map((item) => item.recordId)
      }
      // console.log(selectArray)
      this.$emit('handleSelectionChange', selectArray) //将选中数组传给父组件
    },

Mémoire inter-pages

Définissez la zone de sélection multiple dans el-table-column : reserve-selection="true"

Code complet

//HTML
<el-table
      :data="tableData"
      border
      style="width: 100%"
      stripe
      max-height="500"
      ref="recordsData"
      :row-key="rowKeyInit"
      @selection-change="handleSelectionChange"
    >
      >
      <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column>
      </el-table>
      //JS
    rowKeyInit(row) {
    
    
      return row.recordId
    },
    handleSelectionChange(arr) {
    
    
      // console.log(arr)
      let selectArray = []
      if (arr && arr.length > 0) {
    
    
        selectArray = arr.map((item) => item.recordId)
      }
      // console.log(selectArray)
      this.$emit('handleSelectionChange', selectArray)
    },
    //取消多选
    close(){
    
    
     this.$refs.recordsData.clearSelection() //清除选中的数据
     }