0
点赞
收藏
分享

微信扫一扫

Element-Ui el-date-picker日期传值异常问题解决办法

泠之屋 2024-02-15 阅读 6

Vue3之ElementPlus中Table选中数据的获取与清空方法

文章目录

1. 点击按钮获取与清空选中表格的数据

1. 用到ElementPlus中Table的两个方法

getSelectionRows返回当前选中的行
clearSelection用于多选表格,清空用户的选择

2. 业务场景

3. 操作案例

  1. 定义表格信息
<template>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1500px" append-to-body>
        <el-table ref="tableRef" :data="entrustProjectList" @selection-change="handleProject">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="名称" align="center" prop="name" />
                    </el-table-column>
                  </el-table>
        <template #footer>
                <div class="dialog-footer">
                  <el-button type="primary" @click="getSelectedTableData">获取选中的表格数据</el-button>
                   <el-button @click="clearSelectedTableInfo">清空选中的表格数据</el-button>
                </div>
              </template>
    </el-dialog>
</templte>
  1. 完整案例
<template>
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="1500px" append-to-body>
        <el-table ref="tableRef" :data="entrustProjectList" @selection-change="handleProject">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="名称" align="center" prop="name" />
                    </el-table-column>
                  </el-table>
        <template #footer>
                <div class="dialog-footer">
                  <el-button type="primary" @click="getSelectedTableData">获取选中的表格数据</el-button>
                   <el-button @click="clearSelectedTableInfo">清空选中的表格数据</el-button>
                </div>
              </template>
    </el-dialog>
</templte>
<script setup lang="ts">
import {ref} from "vue";
//表格组件
const tableRef = ref()
/**
 * 获取表格数据按钮事件
 */
const getSelectedTableData = () => {
 //通过Element-Plus表格的getSelectionRows的方法,获取已选中的数据
 let tableData = tableRef.value.getSelectionRows();
  console.log("选中数据",tableData)
};
    
const clearSelectedTableInfo = () => {
  console.log("清空选中数据前==",tableRef.value.getSelectionRows())
  //清空数据,通过Element-Plus表格的clearSelection的方法,清空所有已选中的数据
  tableRef.value.clearSelection()
  console.log("清空选中数据后==",tableRef.value.getSelectionRows())
};    
</script>
举报

相关推荐

0 条评论