el-table单击某行选中数据，并显示已勾选状态

陪小甜甜赏月

已于 2024-08-29 18:01:02 修改

阅读量285

点赞数 3

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

于 2024-07-24 13:58:03 首次发布

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

版权

Element Plus 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<template>
  <el-table ref=tableRef :data="tableData" style="width: 100%" @row-click="handleRowClick">
    <el-table-column type=selection width="50"/>
    <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 = [
  {
    id:1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableRef = ref()
const selectIds = ref([])
const handleRowClick = (row:any) => {
  if(selectIds.value.includes(row.id)){
    const index = selectIds.value.indexOf(row.id)
    if(index>-1){
      selectIds.value.splice(index,1)
      tableRef.value.toggleRowSelection(row,false)
    }
  }else{
    selectIds.value.push(row.id)
    tableRef.value.toggleRowSelection(row,true)
  }
}
</script>