element plus table勾选

Element Plus的表格（Table）组件可以实现勾选功能，并且支持跨页保留选中的数据和勾选样式回显。以下是一个示例：

<template>
  <el-table
    :data="tableData"
    :row-key="rowKey"
    @selection-change="handleSelectionChange"
    style="width: 100%"
  >
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
        { name: '赵六', age: 35, gender: '女' },
      ],
      selectedRows: [], // 保存选中的数据
    };
  },
  computed: {
    rowKey() {
      // 设置行的唯一标识，用于跨页保留选项
      return (row) => row.name;
    },
  },
  methods: {
    handleSelectionChange(selection) {
      // 选中数据发生变化时触发
      this.selectedRows = selection;
    },
  },
};
</script>

在上述示例中，我们使用了`el-table`组件和`el-table-column`组件来创建表格。通过设置`type="selection"`和`reserve-selection="true"`，实现了勾选功能和跨页保留选项。当勾选的数据发生变化时，会触发`selection-change`事件，我们可以在`handleSelectionChange`方法中获取选中的数据并保存到`selectedRows`数组中。