ElementUI获取带选项表格被选中行？？？

最新推荐文章于 2023-02-22 17:00:26 发布

一惊一乍行动组组长

最新推荐文章于 2023-02-22 17:00:26 发布

阅读量832

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_61049292/article/details/120717690

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个Vue3应用中如何处理表格选中状态的案例。通过监听`select`和`selection-change`事件，结合数据对象的`state`属性来标记选中状态。在`handleSelect`函数中，根据选中项是否包含当前行，更新行的选中状态。文章提供了完整的模板和脚本代码，展示了如何在表格中实现选中状态的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接上代码 + 效果

效果是这个样子

官方文档！！

打钩钩无非两种情况，【选中/非选中】，这里真挺坑，不能直接获取到选中的值的【状态】，注意是“状态“”！！

vue3实现！！

<template>
    <el-card class="box-card" shadow="hover">
        <template #header>
            <div class="card-header">
                <span>代办事项</span>
                <el-button class="button" type="text">添加</el-button>
            </div>
        </template>
        <el-table
            :data="tableData"
            size="mini"
            :show-header="false"
            stripe
            @select="handleSelect"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" />
            <el-table-column property="agency" />
        </el-table>
    </el-card>
</template>

<script>
    import {reactive} from "vue";
    export default {
        setup() {
            let tableData = reactive([
                {agency: '修复BUG',state:0},
                {agency: '完成写作',state:0},
                {agency: '好好睡觉',state:0},
                {agency: '早起',state:0},
            ])
            let multipleSelection = reactive([])

            function handleSelect(selection, row) {
                if(selection.indexOf(row) != -1) {
                    row.state = 1
                } else {
                    row.state = 0
                }
                console.log('@',selection)
                console.log('@',row)
            }

            function handleSelectionChange(val) {
                multipleSelection = val
            }

            return {
                tableData,
                handleSelectionChange,
                handleSelect
            }

        }
    }
</script>

<style scoped>
    .box-card {
        height: 340px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

主要代码：

function handleSelect(selection, row) {
     if(selection.indexOf(row) != -1) {
          row.state = 1
          } else {
              row.state = 0
     }
}

官方提供的select回调函数可以接收到两个参数【selection，row】

selection：获取到选中的所有值

row：获取到本次操作的是哪一行

功能实现：循环遍历，查看操作的行有没有进入到selection里面

在：选中

不在：未选中

在这里，用了state属性来标记是否选中状态，方便后期操作数据

let tableData = reactive([
      {agency: '修复BUG',state:0},
      {agency: '完成写作',state:0},
      {agency: '好好睡觉',state:0},
      {agency: '早起',state:0}
])