Vue3實現(xiàn)Element Plus表格的多選功能與條件操作

更新時間：2024年08月09日 09:15:13 作者：碼農(nóng)研究僧

Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構建功能強大、風格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下

前言

本文主要以Demo的形式展示，展示要點為主

基本知識點

數(shù)據(jù)綁定：
v-model 用于雙向綁定數(shù)據(jù)，el-table 的 :data 屬性用于綁定表格數(shù)據(jù)
選擇框列：
使用 el-table-column 的 type=“selection” 屬性來創(chuàng)建多選框列
處理選擇變化：
@selection-change 事件用于處理選擇狀態(tài)變化，獲取選中的數(shù)據(jù)
過濾和操作：
通過對選中的數(shù)據(jù)進行過濾和處理，實現(xiàn)不同的操作需求

1. Demo

多選按鈕通常用于選擇表格中的多行數(shù)據(jù)

常用的 UI 框架如 Element Plus 提供了易于集成的多選功能

<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    :stripe="true"
    :show-overflow-tooltip="true"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="名稱" prop="name" />
    <el-table-column label="狀態(tài)" prop="status" />
    <el-table-column label="操作" fixed="right" width="200">
      <template #default="scope">
        <el-button @click="viewDetails(scope.row)">查看詳情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="handleBatchAction">執(zhí)行批量操作</el-button>
</template>

其js如下：

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElMessage } from 'element-plus';

const loading = ref(false);
const tableData = ref([
  { id: 1, name: 'Item 1', status: '未提交' },
  { id: 2, name: 'Item 2', status: '已提交' },
  // ...更多數(shù)據(jù)
]);

const selectedRows = ref([]);

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

const viewDetails = (row) => {
  // 顯示詳情
  console.log('查看詳情:', row);
};

const handleBatchAction = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('請選擇要操作的項');
    return;
  }

  if (selectedRows.value.some(row => row.status !== '未提交')) {
    ElMessage.warning('只能對“未提交”狀態(tài)的記錄進行操作');
    return;
  }

  // 執(zhí)行批量操作
  console.log('批量操作:', selectedRows.value);
};
</script>