element-plus表格默认展开有子的数据
思路如下:
使用组件提供的
@expand-change="handleExpandChange",和:expand-row-keys="tableConfig.expandRowKeys"
<el-tableref="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"stripeborder@select="select"@select-all="handleSelectAllRow"class="custom-table"@expand-change="handleExpandChange":expand-row-keys="tableConfig.expandRowKeys">xxxxxxx
</el-table>
const tableConfig = reactive({tableData: [],page: 1,pageSize: 15,total: 0,loading: false,selectIdList: [],selectRow: [],expandRowKeys: [] //处理展示的数据
})//查询
const fniSearchTable = async () => {tableConfig.loading = falsetry {const params = {pageindex: tableConfig.page,pagesize: tableConfig.pageSize,searchstr: {//查询的参数,当前是我自己项目中的传参}}const res = await qryInterfaceConfigList(params)const { data } = resif (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 || 0tableConfig.loading = false} catch (error) {tableConfig.tableData = []tableConfig.total = 0tableConfig.loading = falseconsole.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)}}
}