<template> <div> <el-checkbox v-model="isAllSelected" @change="handleSelectAll" >全选</el-checkbox > <div v-for="(tableData, index) in tableList" :key="index"> {{ tableData.tableName }} <el-table :data="tableData.list" > <el-table-column type="selection"></el-table-column> <!-- 表格其他列 --> <el-table-column label="名称" align="center" prop="name" /> <el-table-column label="code" align="center" prop="code" /> </el-table> </div> </div> </template> <script> export default { data() { return { isAllSelected: false, // 全选复选框状态 selectedTables: [], // el-table 复选框状态 tableList: [ // 表格列表数据 { tableName: "表格1", list: [ { name: "vfdsg", code: 12 }, { name: "vfdsg1", code: 123 }, ], }, { tableName: "表格2", list: [ { name: "vfdsg", code: 667 }, { name: "vfdsg1", code: 345 }, ], }, ], }; }, methods: { handleSelectAll(val) { // 全选/取消全选 this.isAllSelected = val; this.selectedTables = Array(this.tableList.length).fill(val); }, }, }; </script>

这是一个 Vue.js 的组件，实现了一个包含多个表格的列表，并且可以通过全选复选框来选择所有表格中的数据。每个表格都有一个复选框用于选择该表格中的数据。该组件使用了 Element UI 的表格组件，其中包括 el-table 、 el-table-column 和 el-checkbox 。其中，el-table-column 的 type 属性设置为 selection ，表示该列是用于选择的列。同时，组件中还定义了一个名为 selectedTables 的数组，用于保存每个表格的选择状态，即每个表格中的数据是否被选中。