当前位置：网站首页 > 数据科学与大数据 > 正文

vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行

数据科学与大数据 来源： 网络 编辑：小编 更新时间：2024-12-01 11:45:04 浏览量：50

vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & hasChildren判断新增子项与children子项数据

效果

在这里插入图片描述
新增

在这里插入图片描述
编辑

在这里插入图片描述

代码
主页面

index.vue

<!-- @Description 在线协作 - 协作管理 - 文档信息 @author wdd @date 2023/11/7 --> <template> <centerHead title="文档信息"></centerHead> <div class="content"> <div class="left"> <h4>目录区</h4> <el-button type="primary" @click="add" v-if="typeName == '大纲目录'">新增一级目录</el-button> <el-table ref="crudRef" border class="table-style" :data="tableData" row-key="id" lazy :load="treeLoad" stripe style="width: 100%; margin-bottom: 20px" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleChange"> <el-table-column type="selection" /> <el-table-column label="名称" prop="name" show-overflow-tooltip /> <el-table-column label="类型" v-if="typeName == '大纲目录'" width="90"> <template #default="scope"> <span>{ 
  {directoryList[scope.row.type]}}</span> </template> </el-table-column> <el-table-column label="标题号" v-if="typeName == '大纲目录'" prop="sort" width="80" /> <el-table-column label="目录说明" prop="dirExplain" show-overflow-tooltip /> <el-table-column label="编写人" v-if="typeName == '大纲目录'" prop="authorName" width="140"/> <el-table-column label="操作" prop="data" width="180"> <template #default="scope"> <el-button link size="small" type="danger" @click="handleClickDelete(scope.row)" v-if="typeName == '大纲目录'"> 删除 </el-button> <el-button link size="small" type="primary" @click="edit('edit',scope.row)" v-if="typeName == '大纲目录'"> 编辑 </el-button> <el-button link size="small" type="primary" @click="edit('addChild',scope.row)" v-if="typeName == '大纲目录' && Number(scope.row.type) < 4"> 新增子项 </el-button> </template> </el-table-column> </el-table> </div> <DirectoryInfo v-if="showDirectory" v-model:dialogVisible="showDirectory" :info-data="directoryInfo" @emit-confirm="confirmOk" /> </div> </template> <script lang="ts" setup> import { ref, inject, onMounted } from 'vue'; import { useRoute } from "vue-router"; import { ElMessageBox, ElMessage } from "element-plus"; import DirectoryInfo from './directoryInfo.vue' import { post } from "@/utils/path.js"; const route = useRoute(); const constant = inject('constant') const typeName = route.query.type const directoryId = route.query.id const maps = new Map() const directoryList = ref(['一级目录', '二级目录', '三级目录', '四级目录', '五级目录']) const tableData = ref([ // { id: 1, name: '1、国网河北公司', type: '一级目录', dirExplain: '说明XXX', authorName: '张三' }, // { // id: 2, name: '1、国网北京公司', type: '一级目录', dirExplain: '说明XXX', authorName: '李四', // children: [{ // id: 21, name: '1.1、国网朝阳公司', type: '二级目录', dirExplain: '说明XXX', authorName: '王五' // }, { // id: 22, name: '1.1、国网昌平公司', type: '二级目录', dirExplain: '说明XXX', authorName: '魏六' // }] // }, ]) const showDirectory = ref(false) const directoryInfo = ref({}) // 列表数据 const getList = () => { post(constant.ieopCollaborate + '/collaborate/directory/list', { collaborateId: directoryId }).then((res) => { // post(constant.ieopCollaborate + '/collaborate/directory/treeList', { collaborateId: directoryId }).then((res) => { const { code, data } = res.data if (code == '200') { tableData.value = data } }) } onMounted(() => { getList() }) const confirmOk = () => { // tableData.value = [] updateTable() //方式一：懒加载更新数据 getList() } const add = () => { showDirectory.value = true directoryInfo.value = { id: directoryId, typeName: 'add' } } const edit = (type: any, row: any) => { showDirectory.value = true row.typeName = type row.directoryId = directoryId directoryInfo.value = { ...row } } // 懒加载 const treeLoad = (tree, treeNode, resolve) => { setTimeout(() => { const params = { pid: tree.id, } const dataList = ref([]) maps.set(tree.id, { tree, treeNode, resolve }) post(constant.ieopCollaborate + '/collaborate/directory/list', params).then((res) => { const data = res.data.data || [] data.forEach((el) => { if (el.hasChildren) { el.children = null } }) dataList.value = data resolve(dataList.value) }) }, 200) } // 在删除或者添加操作成功之后，调用此函数 const updateTable = () => { maps.forEach((item, key) => { const { tree, treeNode, resolve } = maps.get(key) treeLoad(tree, treeNode, resolve) }) } // 批量删除 const ids = ref([]) const handleChange = (val: any) => { ids.value = val.map((item: any) => item.id) } const handleClickDelete = (row: any) => { ElMessageBox.confirm('是否确认删除？若包含子项，将会同步删除子项').then( () => { post(constant.ieopCollaborate + '/collaborate/directory/delete', { ids: [row.id] }).then((res) => { const { code } = res.data if (code == '200') { ElMessage.success('删除成功') updateTable() //方式一：懒加载页面 getList() } }) } ) } </script> <style lang="scss" scoped> .content { margin-top: 20px; margin-left: 16px; display: flex; h4 { margin-bottom: 10px; } .left { flex: 2; border-radius: 4px; padding: 10px; margin-right: 5px; .el-button { float: right; margin-bottom: 10px; } } } </style>

直接铺开

 <!-- lazy :load="treeLoad" 点击节点加载子项 --> <!-- default-expand-all 默认展开所有行子项 --> <el-table ref="crudRef" border class="table-style" :data="tableData" row-key="id" default-expand-all style="width: 100%; margin-bottom: 20px" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleChange">

更新数据

// 删除更新数据 const handleClickDelete = (row: any) => { 
    ElMessageBox.confirm('是否确认删除？若包含子项，将会同步删除子项').then( () => { 
    post(constant.ieopCollaborate + '/collaborate/directory/delete', { 
    ids: [row.id] }).then((res) => { 
    const { 
    code } = res.data if (code == '200') { 
    ElMessage.success('删除成功') history.go(0) //方式二：强刷页面 } }) } ) } // 新增和编辑更新数据 const userOk = () => { 
    tableData.value = [] //方式二：置空后更新数据 getList() }

弹框效果-新增

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

弹框效果-编辑

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

弹框组件页面

directoryInfo.vue

<!-- @Description 在线协作 - 协作管理 - 文档信息 - 新增/编辑目录弹框 @author wdd @date 2023/11/7 --> <template> <div> <el-dialog :title="titleText" v-model="dialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="36%"> <div style="padding-right:40px"> <el-form label-width="100px" ref="formRef" :model="formInline"> <el-form-item label="名称:" prop="name" :rules="{ required: true, validator: elValidateText, title: '名称', length: 100, isRequire: true }"> <el-input v-model="formInline.name"></el-input> </el-form-item> <el-form-item label="类型"> <el-select v-model="formInline.type" placeholder="请选择" disabled style="width:100%"> <el-option label="一级目录" value="0"></el-option> <el-option label="二级目录" value="1"></el-option> <el-option label="三级目录" value="2"></el-option> <el-option label="四级目录 " value="3"></el-option> <el-option label="五级目录 " value="4"></el-option> </el-select> </el-form-item> <el-form-item label="标题号:" prop="sort" :rules="{ required: true, message: '请输入', trigger: 'blur', }"> <el-input placeholder="请输入大于0的正整数" @input="changeSort" v-model="formInline.sort"></el-input> </el-form-item> <el-form-item label="目录说明:" prop="dirExplain" :rules="{ required: true, validator: elValidateText, title: '目录说明', length: 100, isRequire: true }"> <el-input type="textarea" resize="none" v-model="formInline.dirExplain" :autosize="{minRows:3}" show-word-limit maxlength="100"> </el-input> </el-form-item> </el-form> </div> <template #footer> <span slot="footer" class="dialog-footer"> <el-button link type="primary" @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="confirm()">确定</el-button> </span> </template> </el-dialog> </div> </template> <script lang="ts" setup> import { ref, defineProps, defineEmits, computed, watch, inject } from 'vue'; import { post } from "@/utils/path.js"; import { ElLoading, ElMessage } from "element-plus"; import { elValidateText} from '@/utils/validate.js' const formRef = ref() const dataObj = ref() const titleText = ref('') const directoryList = ref(['一级目录', '二级目录', '三级目录', '四级目录', '五级目录']) const constant = inject('constant') const formInline = ref({ collaborateId: '', name: '', sort: '', sortNo: '', dirExplain: '', type: '0' }) const props = defineProps({ infoData: { default: null, type: Object, }, dialogVisible: { type: Boolean, default() { return false }, }, }) //监听方法 const emit = defineEmits(['emit-confirm', 'update:dialogVisible']) const dialogVisible = computed({ get: () => props.dialogVisible, set: (val) => emit('update:dialogVisible', val), }) watch( () => props.dialogVisible, (newVal) => { if (newVal) { dataObj.value = JSON.parse(JSON.stringify(props.infoData)) if (dataObj.value.typeName == 'add') { formInline.value.collaborateId = dataObj.value.id titleText.value = '新增一级目录' } if (dataObj.value.typeName == 'addChild') { formInline.value.collaborateId = dataObj.value.directoryId formInline.value.pid = dataObj.value.id formInline.value.type = (Number(dataObj.value.type) + 1) + '' titleText.value = '新增' + directoryList.value[formInline.value.type] } if (dataObj.value.typeName == 'edit') { formInline.value = { ...dataObj.value } formInline.value.collaborateId = dataObj.value.directoryId formInline.value.id = dataObj.value.id titleText.value = '编辑' + directoryList.value[dataObj.value.type] } } }, { immediate: true } ) const changeSort = (val: any) => { const pattern = /^[1-9][0-9]*$/ if (!pattern.test(val)) { formInline.value.sort = '' } if (titleText.value == '新增一级目录') { formInline.value.sortNo = formInline.value.sort + '.' } if (dataObj.value.typeName == 'edit') { const str = formInline.value.sortNo.split('.') str.splice(-2,1) formInline.value.sortNo = str.join('.') + formInline.value.sort + '.' } if (dataObj.value.typeName == 'addChild') { formInline.value.sortNo = dataObj.value.sortNo + formInline.value.sort + '.' } } const confirm = async () => { await formRef.value.validate((valid: any) => { if (!valid) { return } else { const loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)', }) const params = { ...formInline.value } const url = dataObj.value.typeName == 'addChild' ? '/collaborate/directory/add' : '/collaborate/directory/addRoot' const urlInfo = dataObj.value.typeName == 'edit' ? '/collaborate/directory/update' : url post(constant.ieopCollaborate + urlInfo, params).then((res) => { const { code,message } = res.data if (code == '200') { loading.close() ElMessage.success(dataObj.value.typeName == 'edit' ? '修改成功' : '新增成功') emit('update:dialogVisible', false) formInline.value = {} emit('emit-confirm') } else { loading.close() ElMessage.error(message) // emit('update:dialogVisible', false) } }) .catch(() => { loading.close() }) } }) } </script>
接口数据

data.json

{ 
    "result": 0, "total": "0", "code": "200", "data": [ { 
    "id": "", "createDate": "2024-03-14 18:24:10", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:26:51", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "一级", "pid": "0", "type": "0", "dirExplain": "fs", "authorId": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "authorName": "王大幅", "sort": 1, "sortNo": "1.", "children": [ { 
    "id": "", "createDate": "2024-03-14 18:24:22", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:24:22", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "二级", "pid": "", "type": "1", "dirExplain": "ada", "authorId": null, "authorName": null, "sort": 1, "sortNo": "1.1.", "children": [ { 
    "id": "", "createDate": "2024-03-14 18:24:34", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:24:34", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "三级", "pid": "", "type": "2", "dirExplain": "fsd", "authorId": null, "authorName": null, "sort": 1, "sortNo": "1.1.1.", "children": [ { 
    "id": "", "createDate": "2024-03-14 18:24:45", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:24:45", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "四级", "pid": "", "type": "3", "dirExplain": "fsd", "authorId": null, "authorName": null, "sort": 1, "sortNo": "1.1.1.1.", "children": [ { 
    "id": "", "createDate": "2024-03-14 18:24:56", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:27:18", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "五级", "pid": "", "type": "4", "dirExplain": "dfs", "authorId": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "authorName": "王大幅", "sort": 1, "sortNo": "1.1.1.1.1.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false }, { 
    "id": "", "createDate": "2024-03-14 18:25:43", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:25:43", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "四级", "pid": "", "type": "3", "dirExplain": "fs", "authorId": null, "authorName": null, "sort": 2, "sortNo": "1.1.1.2.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false }, { 
    "id": "", "createDate": "2024-03-14 18:25:23", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-14 18:25:23", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "二级1", "pid": "", "type": "1", "dirExplain": "sdf", "authorId": null, "authorName": null, "sort": 2, "sortNo": "1.2.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false }, { 
    "id": "", "createDate": "2024-03-27 14:52:41", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-27 14:52:41", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "一级1", "pid": "0", "type": "0", "dirExplain": "dfs", "authorId": null, "authorName": null, "sort": 2, "sortNo": "2.", "children": [ { 
    "id": "", "createDate": "2024-03-27 14:52:59", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-27 14:52:59", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "二级", "pid": "", "type": "1", "dirExplain": "czx", "authorId": null, "authorName": null, "sort": 1, "sortNo": "2.1.", "children": [ { 
    "id": "", "createDate": "2024-03-27 15:01:20", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-27 15:01:20", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "三级", "pid": "", "type": "2", "dirExplain": "sfd", "authorId": null, "authorName": null, "sort": 1, "sortNo": "2.1.1.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false }, { 
    "id": "", "createDate": "2024-03-27 15:17:14", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-27 15:17:14", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "二级1", "pid": "", "type": "1", "dirExplain": "df", "authorId": null, "authorName": null, "sort": 2, "sortNo": "2.2.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false }, { 
    "id": "", "createDate": "2024-03-27 15:05:13", "createUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "createUserName": "王大幅", "modifyDate": "2024-03-27 15:05:13", "modifyUser": "9b4483c38c3dc1fe018c5cbdce3e0ae5", "modifyUserName": null, "pageNo": null, "pageSize": null, "collaborateId": "", "name": "二级2", "pid": "", "type": "1", "dirExplain": "dsa", "authorId": null, "authorName": null, "sort": 3, "sortNo": "2.3.", "children": [], "content": null, "hasChildren": false, "hasWriteButton": false } ], "content": null, "hasChildren": false, "hasWriteButton": false } ], "success": true, "message": "操作成功" }
到此这篇vue中，el-table树形数据与懒加载——stripe斑马线 & row-key唯一标识id & lazy属性与加载函数load & default-expand-all之默认展开所有行的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

  • 上一篇： vue中，el-table树形数据与懒加载【实例】（一）——重置resetFields& lazy属性、hasChildren子项& el-select封装下拉组件& 获取当前登录人-reduce用法
  • 下一篇： axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据，子组件有inject选项来使用数据

    • 版权声明：

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！


    转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10677.html

    # 属性 # —— # Vue # 数据 # 函数

    相关文章：

  • vue中，el-table树形数据与懒加载【实例】（一）——重置resetFields& lazy属性、hasChildren子项& el-select封装下拉组件& 获取当前登录人-reduce用法2024-12-01 11:45:04
  • vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽empty（v-slot=empty）和empty-text2024-12-01 11:45:04
  • java使用jdbc连接mysql数据库2024-12-01 11:45:04
  • Access denied for user 'root'@'localhost' (using password: YES) 数据库密码正确，没有权限2024-12-01 11:45:04
  • 生产环境下，centos服务器，mysql数据库配置主从复制2024-12-01 11:45:04
  • axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据，子组件有inject选项来使用数据2024-12-01 11:45:04
  • vue中组合式 API-依赖注入之provide和inject的用法（三）——实例之引用全局静态数据2024-12-01 11:45:04
  • vue中组合式 API-依赖注入之provide和inject的用法（二）——添加响应性 & 污染全局数据、破坏了单向数据流,vuex可追踪数据 & 三种通信方式之父子通信、兄弟通信、跨级通信2024-12-01 11:45:04
  • vue中组合式 API-依赖注入之provide和inject的用法（一）——功能-把一个祖先组件指定的数据和方法，传递给其所有子孙后代 & provide-提供或发送数据， inject-接收数据2024-12-01 11:45:04
  • vue3中，引入data数据方式 & 引入组件的2种方式2024-12-01 11:45:04
    • ❮ 全屏图片 ❯