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)
    }
  }
}