ant design vue3 嵌套表格的用法

<a-table

      :dataSource="dataSource"

      :columns="columns"

      :pagination="pagination"

      @change="tableChange"

      rowKey="id"

      @expand="expandChange"

    >

      <template #bodyCell="{ record, column, index }">

        <div v-if="column.dataIndex === 'index'">{{ index + 1 }}</div>

        <template v-if="column.key === 'actions'">

         <a-button type="link" @click="addRentEvent(record.id)">添加合同</a-button>

          <a-popconfirm

           title="是否确认删除当前数据?"

           ok-text="确认"

           cancel-text="取消"

           @confirm="confirm(record.id)"

           @cancel="cancel"

           >

         <a href="#">删除</a>

         </a-popconfirm>

        </template>

      </template>

      <template #expandedRowRender>

        <a-table

        slot="expandedRowRender"

        slot-scope="record, index, indent, expanded"

        :columns="innerColumns"

        :data-source="innerData"

        :pagination="false"

      >

      <!-- 合同的租赁状态0待生效1生效中2已到期3已退租

生效中，只能续签一次，续签后，续签的合同退租后，才可以退租 -->

      <template #bodyCell="{ column, record }">

        <template v-if="column.key === 'operation'">

          <a-button type="link" @click="reletChange">续租</a-button>

        </template>

        <template v-if="column.key === 'rangeTimer'">

        <span>{{ record.startTime }}至{{ record.endTime }}</span>

        </template>

        <template v-if="column.key === 'status'">

          <a-button class="custom-btn1" size="small" v-if="record.status === 0" style="color:">待生效</a-button>

          <a-button class="custom-btn2" size="small" v-if="record.status === 1">生效中</a-button>

          <a-button class="custom-btn3" size="small" v-if="record.status === 2">已到期</a-button>

          <a-button class="custom-btn4" size="small" v-if="record.status === 3">已退租</a-button>

        </template>

      </template>

    </a-table>

      </template>

    </a-table>

// 放父表格数据的数组

const dataSource = ref<any[]>([]);

// 放子表格的数组

const innerData = ref<any>([]);

const columns = ref([

  {

    title: '序号',

    dataIndex: 'index',

    key: 'index',

  },

  {

    title: '企业名称',

    dataIndex: 'name',

    key: 'name',

  },

  {

    title: '联系人',

    dataIndex: 'contact',

    key: 'contact',

  },

  {

    title: '联系电话',

    dataIndex: 'contactNumber',

    key: 'contactNumber',

  },

  {

    title: '操作',

    // 操作这一列不需要dataIndex，因为dataIndex是去渲染dataSource这个数组里面的元素的键的值的

    // dataIndex: 'cardStatus',

    key: 'actions',

  },

]);

const innerColumns = [

  { title: '租赁楼宇', dataIndex: 'buildingName', key: 'buildingName' },

  { title: '租赁起止时间', dataIndex: 'rangeTimer', key: 'rangeTimer' },

  { title: '合同状态', dataIndex: 'status', key: 'status' },

  {

    title: '操作',

    key: 'operation',

    scopedSlots: { customRender: 'operation' },

  },

];

const pagination = computed(() => ({

  position: ['bottomRight'],

  total: total1.value,

  current: formState.page,

  pageSize: formState.pageSize,

  showQuickJumper: true, // 是否显示跳转的结构

  showSizeChanger: true, // 显示每页显示条数切换器，下拉框

  pageSizeOptions: ['2', '3', '5', '10'],

  showTotal: (total: number) => ` 共${total} 条`,

}));

// table内置的分页插件，触发事件change

const tableChange = (pagination: any) => {

  formState.page = pagination.current;

  formState.pageSize = pagination.pageSize;

  search();

};

// 企业列表

const search =  async() => {

  const res = await getEnterpriseRequest({

    page:formState.page,

    pageSize: formState.pageSize,

    name:formState.name

  });

  console.log(res, '企业列表');

  dataSource.value = res.data.rows;

  total1.value = res.data.total;

};

search()

// * 功能：点击某行加号，加载子表格数据  // 点开子级表格（就是点击那个加号）触发的函数

// * 参数：expanded：是否展开

// * 参数：record：点击行的数据

const expandChange = (expanded:any, record:any) => {

console.log(expanded, record.id, '得到的数据');

if(!expanded) return

rentEnterpriseList(record.id)

}

// 企业租赁信息列表-展开

const rentEnterpriseList = async(id:any) => {

  const res = await rentEnterpriseListRequest(id)

  console.log(res, '获取企业租赁信息列表');

  innerData.value = res.data

}