element-ui在table怎么展示数据checkbox

Element UI 是一个基于 Vue.js 的开源 UI 组件库，它提供了一套丰富的表格组件 `el-table`。要在 `el-table` 中展示数据并且包含复选框，你可以按照以下步骤进行设置：

首先，安装 Element UI 并引入 `el-table` 和 `el-checkbox` 组件：

npm install element-ui
import { ElTable, ElCheckbox } from 'element-ui';

然后，在模板中使用 `el-table`：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <!-- table列 -->
      <el-table-column type="selection" label="选择" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <!-- 其他列... -->
    </el-table>
  </div>
</template>

在 `data` 或者 `computed` 中定义 `tableData`：

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        // 数据...
      ],
      selectedRowKeys: [], // 存储选中的行ID
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRowKeys = val.map(item => item.id);
      // 当选中状态改变时，更新这里的逻辑
    }
  },
};

在这里，`type="selection"` 设置了列类型为复选框，`@selection-change` 观察选择的变化，并将其存储在 `selectedRowKeys` 数组中。