el-table 和 el-checkbox使用

el-table 是 Element UI 提供的表格组件，用于展示和处理大量数据。el-checkbox 是 Element UI 提供的复选框组件，用于实现多选功能。

在使用 el-table 时，首先需要引入相应的组件：

import { ElTable, ElTableColumn } from 'element-ui';

然后在模板中使用 el-table 组件：

<template>
  <div>
    <el-table :data="tableData">
      <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>
  </div>
</template>

其中，:data 属性绑定了表格的数据，tableData 是一个数组，每个元素代表一行数据。el-table-column 用于定义表格的列，prop 属性指定了对应数据对象中的属性名，label 属性用于显示列标题。

接下来是 el-checkbox 的使用，同样需要引入相应的组件：

import { ElCheckbox, ElCheckboxGroup } from 'element-ui';

然后在模板中使用 el-checkbox 组件：

<template>
  <div>
    <el-checkbox-group v-model="selectedItems">
      <el-checkbox v-for="item in checkboxOptions" :label="item.value" :key="item.id">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

其中，v-model 属性绑定了选中的复选框值，selectedItems 是一个数组，存储选中的复选框的值。el-checkbox-group 包裹多个 el-checkbox 组件，v-for 指令用于遍历 checkboxOptions 数组，:label 属性绑定每个复选框的值，:key 属性用于标识每个复选框。在 el-checkbox 组件内部，使用 {{ item.label }} 显示复选框的文本。

以上是 el-table 和 el-checkbox 的简单使用方法，根据实际需求可以进一步配置和定制。