• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Is that what you want to achieve first?

​

If so, just read this one, I will write it in detail!

The first step is to insert a table into the table

 <a-table
   :expandRowByClick="true"
   :columns="columns"
   :data-source="datas"
   :loading="loading"
   @expand="zi"
   >
   <template #expandedRowRender="{ record }">
    <a-table
     size="small"
    :expandRowByClick="true"
    :columns="columns2"
    :data-source="data2"
    :loading="loading"
    />
   </template>
 </a-table>
Copy the code

Key attributes:

ExpandedRowRender: This is the property that makes the list collapsible

Record: This is all the properties of the click row; If you don’t know how to insert a table, I’ll show you the blue, okay

Expand: Triggered when you click on the expanded icon to get the row data. There are two callback arguments, Function(expanded(Boolean), record(row data).

Data to be obtained

const zi = (expanded, record) = > {
      if (expanded) {
        data2.value = [];
        delAxios
          .get({
            url: `http://*****`,
          })
          .then((res) = > {
            data2.value = res.data.list;
          });
      }
Copy the code

Here is the data returned by the callback:

​

Here, since clicking triggers this function, I use a judgment to request data only when true

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Those who want to make friends with bloggers can go to 🌹

Bloggers are honest and answer questions for free ❤