vue3element puls表格点击行 选中行

在Vue3 Element Plus框架中，Puls表格组件允许用户通过点击行来选择或切换行的状态。Element Plus的`<el-table>`组件提供了`@row-click`事件，你可以绑定这个事件来处理行的点击操作。

首先，在模板部分，设置表格并监听行点击事件：

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <!-- 表格列定义 -->
  </el-table>
</template>

然后，在JavaScript里定义`handleRowClick`函数，它会接收当前被点击的行数据：

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ],
    };
  },
  methods: {
    handleRowClick(row) {
      // 根据需要改变行状态，比如设置一个布尔值表示是否选中
      row.isSelected = !row.isSelected; // 或者直接修改表数据对象的selected属性
      // 如果有其他操作，例如保存选中的行，可以在这里添加
    },
  },
};
</script>

当用户再次点击同一行时，可以通过判断`isSelected`字段的变化来切换行的选中状态。在样式上，你可以配合CSS自定义选中的行外观。