eltable斑马纹

`el-table` 是 Element UI 中的一个表格组件，它用于展示数据列表，非常适合用于前端界面的数据呈现。如果需要在 `el-table` 中嵌套另一个 `el-table`，通常是为了表示数据结构层次分明，例如在显示层级关系的数据，如组织架构、树状结构等。 嵌套 `el-table` 的方式通常是通过 `v-for` 循环遍历数据，其中每个循环项是一个对象或数组，包含子表头和子行数据。你可以创建一个外部的表格，设置其数据属性为包含子表头信息的对象数组，然后在每条记录里使用一个模板或组件渲染内部的 `el-table`。 例如： ```html <template> <div> <el-table :data="parentData"> <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop"></el-table-column> <el-table-row v-for="record in item.records"> <el-table :data="record.data" style="width: 100%;"></el-table> </el-table-row> </el-table> </div> </template> <script> export default { data() { return { parentData: [ { title: '父表头1', records: [{ data: [{ column1: '子表头1' }, { column2: '子数据1' }] }] }, { title: '父表头2', records: [{ data: [{ column1: '子表头2' }, { column2: '子数据2' }] }] } ], columns: [ { prop: 'column1' }, { prop: 'column2' } ] }; } }; </script> ```

### Element UI `el-table` 行选择功能详解 Element UI 提供了一个强大而灵活的数据表格组件 `el-table`，支持多种操作方式来增强用户体验。对于行的选择功能而言，主要通过配置特定属性以及监听事件实现。 #### 基本用法 要启用多选模式，在 `<el-table>` 标签内加入带有 `type="selection"` 的列定义： ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 多选框 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 数据展示列 --> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <!-- 显示已选项 --> <span>已选 {{ selectedRows.length }} 条</span> </div> </template> ``` 此部分展示了如何创建一个多选表单并处理当用户改变所选项时触发的方法[^1]。 #### 获取当前选中的行 为了跟踪哪些行被选中，可以利用 `@selection-change` 事件绑定到一个自定义方法上，该方法接收参数作为新选定的记录列表： ```javascript <script> export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; } } }; </script> ``` 这段代码实现了每当用户的选取发生变化时更新内部状态的功能。 #### 单独控制某一行是否可选 如果希望某些特殊条件下禁止单个单元格参与全选或多选，则可以在对应列中添加 scoped slot 并返回布尔值决定其可用性： ```html <!-- 自定义渲染函数判断每一项是否允许勾选 --> <el-table-column type="selection" width="55" :selectable="rowSelectable"></el-table-column> ... <script> methods: { rowSelectable(row, index){ // 返回 false 则不可选；true 可正常勾选 return !this.isRowDisabled(row); }, isRowDisabled(row){ // 定义逻辑判定哪几条不允许选中 return someConditionBasedOnRowData; } } </script> ``` 上述片段说明了怎样基于业务需求动态调整每一条目的可选性。