Vue3 el-table 默认选中 传入的数组

一、效果:

二、官网是VUE2 现更改为Vue3写法

javascript 复制代码
<template>
  <el-table
      :data="tableData"
      border stripe
      row-key="id"
      ref="tableRef"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{
            background: '#b7babd',
            color: '#1e1f22',
            height: '35px',
            'text-align': 'center'
          }"
      v-loading="tableLoading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40px" :reserve-selection="true"/>
      <el-table-column fixed prop="id" label="序号" width="60px" type="index"/>
      <el-table-column label="编码" align="center" width="140px" prop="code"/>
      <el-table-column label="名称" align="center" width="120px" prop="name" />
    </el-table>
</template>
javascript 复制代码
<script setup lang="ts" name="rulesTable">
    const tableRef = ref()
    const isSelectIds = ref([]) // 选中的id

    const handleSelectionChange = (selection: any[]) => {
      isSelectIds.value = []
      const ids = selection.map(item => item.id);
      const names = selection.map(item => item.excptName);
      isSelectIds.value = ids;
    }

    const open = async (selectIds: Array<any>, type: string) => {
          dialogVisible.value = true
          isSelectIds.value = selectIds
          isSelectNames.value = ""
          tableLoading.value = true
          try {
            await EnergyBaseMeterInfoApi.getRulesTableList(type).then((res)=>{
              tableData.value = res

                 // todo 假设默认选中的是
                  isSelectIds.value = [12323123,232323234]
                 // todo 假设默认选中的是

              // 循环需要选中的数组
              isSelectIds.value.forEach(id => {
              // 在数据源中判断是否存在
              const row = tableData.value.find(r => String(r.id) === id);
                if (row) {
                  tableRef.value.toggleRowSelection(row, true);
                }
             });
            })
          } finally {
            tableLoading.value = false
          }
        }

    defineExpose({ open })
</script>

element官网

相关推荐
GISer_Jing2 小时前
前端面试通关:Cesium+Three+React优化+TypeScript实战+ECharts性能方案
前端·react.js·面试
落霞的思绪2 小时前
CSS复习
前端·css
咖啡の猫4 小时前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲7 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5817 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路7 小时前
GeoTools 读取影像元数据
前端
ssshooter8 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友8 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry9 小时前
Jetpack Compose 中的状态
前端
dae bal9 小时前
关于RSA和AES加密
前端·vue.js