element懒加载树形表格

已于 2024-04-28 10:04:59 修改
阅读量1.1k 收藏 26
点赞数 41
文章标签： vue.js elementui javascript
于 2024-03-21 15:17:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianfeng159357/article/details/136909846
版权

   <el-table class="table" v-if="isshow" stripe :data="tableData" :props="tableProps"  style="width: 100%;margin-top: 4px;"

                            row-key="code" v-loading="loading" lazy :load="searchDevice" :height="600"

                            :header-cell-style="headerCellStyle"

                            :tree-props="{ children: 'children1', hasChildren: 'hasChildren' }" :default-expand-all="false"

                            :header-cell-class-name="addclass" :expand-on-click-node="true">

                   

                            <el-table-column align="left" prop="codeName" :label="$t('twoPermissions.equipment_catalog')"

                                min-width="150">

                                <template slot-scope="{ row }">

                                    <i style="" v-if="!row.hasChildren" class="iconfont icon-video-camera-full"></i>

                                    <i  v-if="row.hasChildren" style="color:#ffa500" class="iconfont icon-wenjianleixing-biaozhuntu-wenjianjia"></i>

                                    {{ row.codeName }}

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="real_time" :label="$t('twoPermissions.realTimePreview')"

                                min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.real_time == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.real_time == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="(row.real_time == 2 && row.expireDate == null && row.revokeDate != null) || (row.expireDate != null && row.revokeDate != null)"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="preview_capture" :label="$t('twoPermissions.previewShot')"

                                min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.preview_capture == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.preview_capture == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="(row.real_time == 2 && row.expireDate == null && row.revokeDate != null) || (row.expireDate != null && row.revokeDate != null)"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="demand_video" :label="$t('twoPermissions.replayTheater')"

                                min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.demand_video == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.demand_video == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.demand_video == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="demand_download"

                                :label="$t('twoPermissions.videoDownload')" min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.demand_download == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.demand_download == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.demand_download == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="video_capture" :label="$t('twoPermissions.videoCapture')"

                                min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.video_capture == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.video_capture == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.video_capture == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="PZT_control" :label="$t('twoPermissions.pZTControl')"

                                min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.PZT_control == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.PZT_control == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.PZT_control == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="settings_position"

                                :label="$t('twoPermissions.setPresetPosition')" min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.settings_position == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.settings_position == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.settings_position == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="adjustment_position"

                                :label="$t('twoPermissions.adjustingPresetPositions')" min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.adjustment_position == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.adjustment_position == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.adjustment_position == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                            <el-table-column align="center" prop="preset_position"

                                :label="$t('twoPermissions.presetNavigationPosition')" min-width="55">

                                <template slot-scope="{ row }">

                                    <img v-if="row.preset_position == 2 && row.expireDate == null && row.revokeDate == null"

                                        src="./yes.png" style="width: 20px;">

                                    <el-popover

                                        v-else-if="row.preset_position == 2 && row.expireDate != null && row.revokeDate == null"

                                        placement="top-start" width="330" trigger="hover">

                                        临时时间：{{ row.expireDate }}

                                        <img slot="reference" src="@/assets/images/permissions/temporary.png"

                                            style="width: 24px;transform: scale(1.2) translateX(2px);">

                                    </el-popover>

                                    <el-popover

                                        v-else-if="row.preset_position == 2 && row.expireDate == null && row.revokeDate != null"

                                        placement="top-start" width="330" trigger="hover">

                                        回收时间：{{ row.revokeDate }}

                                        <img slot="reference" src="@/assets/images/permissions/revoke.png"

                                            style="width: 18px;transform: scale(1.5);">

                                    </el-popover>

                                </template>

                            </el-table-column>

                        </el-table>

//data里的props

  tableProps: {

                children: 'children',

                label: 'orgName',

                value: 'orgId',

                orgLevel: 'orgLevel',

            },

//设置树形节点

  setHasChildren(list, boolean) {

            list.forEach(item => {

                // 添加组织目录下用户

                if (item.powerCode != null && item.powerCode != '') {

                    let arr = item.powerCode.split(',')

                    arr.forEach(a => {

                        item[this.getCode(a)] = '2'

                    })

                }

                if (item.children != null) {

                    console.log(item,'item++');

                    // this.searchDevice(item,item,()=>{})

                item['hasChildren'] = boolean

                    this.setHasChildren(item.children, boolean)

                }

            });

        },

//懒加载的方法

async searchDevice(row, treeNode, resolve) {

            // 查询目录树 设备

            let param = {

                targetType: "1",

                catalogCode: row.code,

                targetId: this.queryParam.userCode,

                powerCode: row.powerCode,

            }

            let res = await getqueryDevicePowerList(param);

            if (res.data.status == '1') {

                let arr = []

                if (row.children != null) {

                    arr = row.children

                }

                if (res.data.data != [] && res.data.data.length != 0) {

                    res.data.data.forEach(item => {

                        if (item.powerCode != null) {

                            let arr = item.powerCode != null ? item.powerCode.split(',') : []

                            arr.forEach(a => {

                                item[this.getCode(a)] = '2'

                                item['isDevice'] = true

                            })

                        }

                        arr.push(item)

                    })

                }

                this.deviceCount += (arr.length / 1);

                this.$set(row, 'children1', arr)

                resolve(arr)

            } else {

                return resolve([])

            }

        },

tianfeng159357
关注
  • 41
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Elment ui中el-table 实现表格树
ddsuuny的博客
03-01 2608
<el-table v-loading="loading" row-key="code" ref="table" :data="tableList" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" > <el-table-column prop="name" label="...
element树形控件懒加载的动态加载
09-08
利用element树形控件菜单栏被触发时加载事件进行Element树形结构懒加载的动态加载。
element树形table表格
Xiang_Gong_Ya_的博客
02-22 1241
'上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1517 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1516 弄''上海市普陀区金沙江路 1518 弄''上海市普陀区金沙江路 1517 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1516 弄''上海市普陀区金沙江路 1519 弄''上海市普陀区金沙江路 1519 弄'
element table 树形表格封装
qq_36869635的博客
01-25 871
element8.x版本以前是没有树形表格封装的 所以自己上网搜到方法改了一下，没想到11.多版本新增了树形表格。手动哭泣0.0…算是纪念一下吧 table-tree <table-tree v-loading="loading" :columns="columns" :tree-structure="true" v-on:child-delect="listenToMyBoy" :data-source="menuData"></table-tree> //table-tr
elementui table表格树形数据
wangaiwen的博客
02-10 3120
elementui table表格树形数据
elementUI 树状表格
qq_39927006的博客
09-27 1085
我们可以根据Id+时间戳每次查询的时候都生成新的key。这样就不会存在缓存导致查询后数据还是之前的，并且能起到重置的作用，注意这个设置的值的名称要与row-key绑定的一致。主要是使用这个方法，parentId为你要更新的父节点的ID。原因分析，因为row-key=“uniqueKey” 会对这个字段查询后根据Id进行存储，所以当每次查询id不变的情况下缓存的数据会一直存在。2.1关于数据的处理，返回的数据中一定要有一个字段 hasChildren 并且为Boolean类型，用来判断该条数据是否会有子类。
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
lib.zip element-ui 树形表格
03-06
在Element UI框架中，树形表格（Tree Table）是一种结合了数据树结构和表格展示的组件，常用于处理具有层级关系的数据。在实际应用中，我们可能会遇到一些常见问题，如全选功能不完善或者父子节点联动选中失效。本文...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
实现滚动懒加载的关键是监听表格容器的滚动事件。通过 JavaScript，我们可以添加事件监听器 `addEventListener` 来捕获滚动事件。在 Vue 中，也可以使用 `@scroll` 事件监听器。 4. **计算滚动位置**： 滚动懒...
优雅的将ElementUI表格变身成树形表格的方法步骤
10-17
在本文中，我们将探讨如何优雅地将ElementUI的普通表格转换为树形表格。ElementUI，一个流行的Vue.js UI库，虽然没有内置的树形表格组件，但通过一些技巧和自定义代码，我们可以实现这个功能。以下是一个详细的步骤...
Django树形结构实现方法
01-27
Djangomptt是个Django第三方组件，目标是使Django项目能在数据库中存储层级数据（树形数据）。它主要实现了修改过的前序遍历算法，如果你对原理还不是很了解，可以看我的这篇文章。当然，使用mptt时，原理是可以不用...
基于layui实现树形穿梭框
最新发布
05-22
- 加载数据：使用layui的API加载树形结构的数据，通常是从服务器获取JSON格式的数据，然后调用`layui.tree`方法生成树形结构。 - 绑定事件：监听用户的点击操作，通过`layui.form.on('select')`方法捕获选择变化，...
基于vuejs实现树形表格的封装vuetreetable
08-10
对于大数据量的树形表格，可以使用虚拟滚动或懒加载技术，只渲染可视区域内的节点，提高性能。 9. **测试**： 使用Jest或Mocha等测试框架编写单元测试和集成测试，确保组件的正确性和稳定性。 在`vue-tree-table...
【JavaScript源代码】vue Element-ui表格实现树形结构表格.docx
12-29
Vue.js 是一种流行的前端JavaScript框架，它提供了丰富的...总之，这个示例展示了如何使用Vue.js和Element UI的Table组件创建具有树形结构的表格，同时处理数据异步加载和分页功能，为用户提供了直观且交互性强的界面。
element-ui-树状表格
ioncannontic的博客
04-07 665
element-ui-树状表格
element的Table表格组件树形数据与懒加载简单使用
weixin_41549971的博客
01-10 2163
element的Table表格组件树形数据与懒加载简单使用
element树状表格实现
weixin_50599885的博客
04-08 5068
本文主要介绍了树状表格的实现和一些特定需求CSS样式的更改
elementUI 表格树使用 tableTree
weixin_43678533的博客
12-23 7417
elementUI 表格树使用 tableTree效果图一、load懒加载方式1.页面2.load方法二、使用el-table-tree-column标签1.页面2.接口返回数据结构三、注意 效果图 一、load懒加载方式 1.页面 代码如下（示例）： <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" :header-cell-style="{background:'rgba(250,250
element树形表格懒加载
04-04
Element UI提供的树形表格组件支持懒加载，可以在需要时异步加载子节点数据，避免一次性加载过多数据导致页面卡顿。 以下是实现懒加载的基本步骤： 1. 设置树形表格的 lazy 属性为 true，表示开启懒加载。 2. 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值