分享

el-table 多选表格 回显

 化茧成蝶时光机 2024-09-19 发布于上海

<el-table ref="multipleTable" :key="newAppForm.applyType" border stripe :data="tableData" row-key="id" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="资产编码" prop="eq_code" />
  <el-table-column label="设备序列号" prop="serial_no" />
  <el-table-column label="设备类型" prop="category" />
  <el-table-column label="下发日期" prop="release_date" />
</el-table>

el-table 使用 ref、row-key

getSelfEquipment().then(res => {
  this.tableData = res.data
}).finally(() => {
  // 表格回显
  this.$nextTick(() => {

    const id_list = this.multipleSelection.map(item => item.id)
    const selected_rows = this.tableData.filter((item, index, array) => {
      return id_list.indexOf(item.id) !== -1 // 勾选的行
    })
    this.$nextTick(() => {
      selected_rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    })

  })
})

用 id 匹配已选中的行


参考链接:https://blog.csdn.net/lyxgoodLucky/article/details/139357489

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多