element-ui树形表格层级选择

最新推荐文章于 2024-08-21 14:48:47 发布

Terminal丶句点

最新推荐文章于 2024-08-21 14:48:47 发布

阅读量3.2k

点赞数 1

分类专栏： VUE element-ui

本文链接：https://blog.csdn.net/qq_40026668/article/details/112655602

版权

本文展示了如何在Element-UI中实现树形表格的层级选择功能，包括效果预览和相关代码示例。

摘要由CSDN通过智能技术生成

效果展示

在这里插入图片描述

代码

//template
<el-table
    ref="multipleTable"
    v-loading="dataListParams.loading"
    :data="dataList"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    border
    default-expand-all
    row-key="pk_id"
    @select="rowSelect"
    @select-all="selectAll"
  >

//数据
data() {
   
      return {
   
        originalData: [], //后台返回的原始数据
        dataList: [], //树形函数转换后的树形结构数据
      }
    },

// 树形数据转换工具
/**
 * @description 父子关系的数组转换成树形结构数据
 * @param data
 * @param pKey
 * @returns {*}
 */
export function translateDataToTree(list, pKey = 'parent_id') {
   
  let data = JSON.parse(JSON.stringify(list))
  const parent = data.filter(
    (value) =>
      value[pKey] === 'undefined' || value[pKey] == null || value[pKey] == 0
  )
  const children = data.filter(
    (value) =>
      value[pKey] !== 'undefined' &&