Vue 3 中实现 Element Plus 表格的多选功能与条件操作（附Demo）

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px;">
    <el-button @click="handleDelete">删除</el-button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      // ...更多数据
    ]);
    const multipleSelection = ref([]);
 
    const handleSelectionChange = (val) => {
      multipleSelection.value = val;
    };
 
    const handleDelete = () => {
      if (multipleSelection.value.length === 0) {
        alert('请至少选择一项进行操作');
        return;
      }
      // 假设的删除操作
      multipleSelection.value.forEach(item => {
        const index = tableData.value.indexOf(item);
        tableData.value.splice(index, 1);
      });
      alert('删除成功');
    };
 
    return {
      tableData,
      handleSelectionChange,
      handleDelete
    };
  }
};
</script>

这段代码展示了如何在Vue 3中使用Element Plus库创建一个带有多选框的表格，并实现了多选操作与条件删除的功能。代码中使用了ref来定义响应式数据，并通过方法handleSelectionChange更新选中项的状态，handleDelete方法用于执行删除操作。这是学习Vue 3和Element Plus的一个很好的起点。