获取el-table勾选行的index

陪小甜甜赏月

已于 2024-08-29 18:00:17 修改

阅读量703

点赞数 4

分类专栏： Element Plus 文章标签： elementui 前端

于 2024-07-19 16:40:46 首次发布

本文链接：https://blog.csdn.net/weixin_40920919/article/details/140553950

版权

Element Plus 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<template>
  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"/>
    <!-- 表格其他列 -->
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const selectData = ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
      const indexes = val.map((item, index) => {
        return tableData.findIndex((dataItem) => dataItem === item);
      });
      selectData.value = indexes;
      console.log(selectData.value)
    };

</script>