element plus 表格el-table行多选单选

在 Element Plus 的 el-table 组件中，可以通过设置 el-table 的 row-key 属性和使用 el-table-column 的 type="selection" 来实现行的多选和单选功能。

以下是一个简单的例子，展示了如何使用 Element Plus 的 el-table 组件实现行的多选和单选：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <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>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    // 其他数据
  },
  // 其他数据...
]);
 
const selection = ref([]);
 
const handleSelectionChange = (val) => {
  selection.value = val;
};
 
const handleRowClick = (row, column, event) => {
  if (selection.value.length === 0 || selection.value[0].id !== row.id) {
    selection.value = [row];
  } else {
    selection.value = [];
  }
};
</script>

在这个例子中：

• row-key 属性用于指定每行数据的唯一键，这里假设每行数据都有一个 id 属性。
• el-table-column 的 type="selection" 用于创建多选框列。
• 使用 @selection-change="handleSelectionChange" 监听选中项的变化，并将当前选中的行数据存储在 selection 变量中。
• 使用 @row-click="handleRowClick" 监听行点击事件，实现单选逻辑：如果当前没有选中项，或者点击的行不是当前选中项，则选中该行；如果点击的行已经选中，则取消选中。

这样就实现了表格行的多选和单选功能。