html 树形展示数据,element-ui 表格树形数据 的展示和收起

//row-key 和ref 要必须写

v-loading="load"

element-loading-text="加载数据中"

ref="theTable"

:data="tableList"

style="width: 100%"

:row-key="add"

:tree-props="{ children: ‘children‘, hasChildren: ‘hasChildren‘ }"

:header-cell-style="{ background: ‘#eef1f6‘, color: ‘#606266‘ }"

>

......

method:{

//筛选

screenclick() {

//点击筛选的时候 让筛选出来的数据展开

this.forArr(this.tableList, false);

this.getList();

},

// 重置

Resetdata() {

this.textval = "";

//重置的时候 让数据全部收起

this.forArr(this.tableList, false);

this.getList();

},

//列表展开和收起

forArr(arr, isExpand) {

arr.forEach(i => {

this.$refs.theTable.toggleRowExpansion(i, isExpand);

if (i.children) {

this.forArr(i.children, isExpand);

}

});

},

}

原文:https://www.cnblogs.com/itcjh/p/12936358.html

基于Element UI的`el-table`组件,要实现虚拟滚动树形列表功能,通常需要结合Vue.js的数据驱动能力一些库如`vue-virtual-scroller`或自定义计算性能的方式。以下是一个基本的步骤: 1. **安装依赖**:首先安装`vue-virtual-scroller`库,如果还没安装可以使用npm或yarn: ``` npm install vue-virtual-scroller --save ``` 2. **引入并注册组件**:在你的Vue组件中导入`ElTable``VirtualScroll`: ```html <template> <div> <el-table :data="treeData" :virtual-scroll="true"> <!-- ... --> </el-table> <vscroll ref="virtualScroll"></vscroll> </div> </template> <script> import { ElTable } from 'element-plus'; import VirtualScroll from 'vue-virtual-scroller'; export default { components: { ElTable, VirtualScroll, }, // ... }; </script> ``` 3. **设置虚拟滚动选项**:在Vue实例中配置`el-table`的`virtual-scroll`属性,并监听数据变化: ```javascript data() { return { treeData: [], // 你的树形数据源 virtualScrollOptions: { containerHeight: 400, // 列表容器高度 itemHeight: 50, // 每行的高度 }, }; }, mounted() { this.virtualScroll = this.$refs.virtualScroll.create({ ...this.virtualScrollOptions, items(this.treeData), // 需要提供一个方法返回数据项数组 }); }, computed: { // 更新虚拟滚动区域当数据源更新 virtualScroll() { return this.$refs['virtualScroll'].value; } }, watch: { treeData(newData) { if (newData !== this.treeData) { this.virtualScroll.update({ items: newData }); this.treeData = newData; // 更新数据源 } }, }, methods: { // 根据需求定制item渲染逻辑,这里只是一个基础示例 renderItem(item, index) { return ( <el-table-row key={index}> <!-- 渲染树形节点内容 --> </el-table-row> ); }, }, // ... </script> ``` 4. **调整树形结构展示**:根据实际业务,你需要编写`renderItem`函数来处理树形节点的渲染,包括展开/收起、层级等。 注意:虚拟滚动并不适用于所有场景,它主要为了提高大数据量下表格的性能,如果数据量不大或者不需要滚动,就无需开启虚拟滚动。另外,树形数据的虚拟滚动可能会更复杂,因为还需要考虑节点的层次布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值