element-plus表格默认展开有子的数据

思路如下:

使用组件提供的

@expand-change="handleExpandChange",和:expand-row-keys="tableConfig.expandRowKeys"

html 复制代码
<el-table
        ref="refTable"
        :data="tableConfig.tableData"
        v-loading="tableConfig.loading"
        :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
        style="width: 100%; margin: 0 auto"
        height="100%"
        align="center"
        row-key="interfacecode"
        stripe
        border
        @select="select"
        @select-all="handleSelectAllRow"
        class="custom-table"
        @expand-change="handleExpandChange"
        :expand-row-keys="tableConfig.expandRowKeys"
      >
        xxxxxxx
</el-table>
javascript 复制代码
const tableConfig = reactive({
  tableData: [],
  page: 1,
  pageSize: 15,
  total: 0,
  loading: false,
  selectIdList: [],
  selectRow: [],
  expandRowKeys: [] //处理展示的数据
})


//查询
const fniSearchTable = async () => {
  tableConfig.loading = false
  try {
    const params = {
      pageindex: tableConfig.page,
      pagesize: tableConfig.pageSize,
      searchstr: {
       //查询的参数,当前是我自己项目中的传参
      }
    }
    const res = await qryInterfaceConfigList(params)
    const { data } = res
    if (data.rows && data.rows.length > 0) {
      tableConfig.tableData = data.rows.map((item) => {
        // 处理父元素
        const processedItem = {
          ...item,
          interfaceText: item.interfacesend ? item.interfacesend + '->' + (item.interfacereceive ? item.interfacereceive : '') : '',
          interfaceavailable: item.interfaceavailable ? (item.interfaceavailable == 'Y' ? '启用' : '停用') : ''
        }

        // 递归处理子元素
        if (item.children && item.children.length > 0) {
          processedItem.children = item.children.map((child) => ({
            hasChildren: true, //表格行是否显示展开箭头
            ...child,
            interfaceText: child.interfacesend ? child.interfacesend + '->' + (child.interfacereceive ? child.interfacereceive : '') : '',
            interfaceavailable: child.interfaceavailable ? (child.interfaceavailable == 'Y' ? '启用' : '停用') : ''
          }))
        }
        return processedItem
      })
//handleExpandChange方法中第一个是要展开的行信息,第二个参数是数组形式的行数据信息
      nextTick(() => {
        handleExpandChange(tableConfig.tableData[0], tableConfig.tableData)
      })
    } else {
      tableConfig.tableData = []
    }
    tableConfig.total = data.rowcount || 0
    tableConfig.loading = false
  } catch (error) {
    tableConfig.tableData = []
    tableConfig.total = 0
    tableConfig.loading = false
    console.error(error)
  }
}

// 触发点击箭头事件: interfacecalccode是我数据的唯一值
const handleExpandChange = (row, expandedRows) => {
  if (expandedRows.includes(row)) {
    tableConfig.expandRowKeys.push(row.interfacecalccode)
  } else {
    const index = tableConfig.expandRowKeys.indexOf(row.interfacecalccode)
    if (index > -1) {
      tableConfig.expandRowKeys.splice(index, 1)
    }
  }
}
相关推荐
烟袅27 分钟前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅29 分钟前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴30 分钟前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智44 分钟前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front1 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
天一生水water1 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海1 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影2 小时前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
W.Buffer2 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
葱头的故事3 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节