在el-table的expand展开行里有两个滑动条
时间: 2024-10-19 10:05:59 浏览: 13
在Element UI的`el-table`组件中,如果在展开的行(通常称为详情行或子行)里设置了两个滑动条,可能是你在数据展示或者自定义组件上实现了这样的功能。这种设计通常是用来显示或处理表格内某个复杂内容区域的详细信息,比如滚动查看包含多个字段的长文本、大图片或者是数值较多的数据列表。
例如,你可能会在展开行中嵌套一个带有`el-scrollbar`(Element的滚动条组件)的div,然后在这个div里添加两个独立的滑动条,每个滑动条对应不同的部分。这有助于用户更方便地浏览和操作这些详细信息。
如果你需要实现在`el-table`的展开行里添加滑动条,可以这样做:
```html
<template>
<el-table :data="tableData" @expand-change="handleExpandChange">
<el-table-column type="expand">
<template slot-scope="{row}">
<div class="detail-wrapper">
<el-scrollbar :always-visible="true">
<!-- 这里可以放两个独立的滚动容器 -->
<div v-for="(item, index) in row.detailItems" :key="index" style="width: 50%; overflow-y: auto;">
<p>滚动条一内容</p>
<p>滚动条二内容</p>
</div>
</el-scrollbar>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ ... /* 表头数据 */ },
{ detailItems: [/* 长度可观的数组,用于填充详细内容 */] }
],
handleExpandChange(row) {
// 展开或收起事件处理
}
};
}
};
</script>
```
阅读全文