vue antd vxe-gril如何添加展开行的功能

这个table有2个页面在调用，根据不同的需求，每个页面调用不同的数据进行展示，table内的数据通过getData()方法判断后导入，现在因为table内的数据太多，列很窄，内容展示不下，需要将一部分数据通过行展开的方式显示出来

    <vxe-grid 
      class="xGrid"
      ref="xTable1"
      row-id="id"
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :header-cell-class-name="headerCellClassName"
      :cell-class-name="cellClassName"
      auto-resize
      @current-change="toChange"
      :expand-config="{accordion: true, iconOpen: 'vxe-icon--arrow-top', iconClose: 'vxe-icon--arrow-bottom', loadMethod: loadContentMethod}">
      <vxe-column type="expand">
        <template>
          <a-descriptions :column="columnDes">
            <a-descriptions-item
              v-for="(item, index) in datalist"
              :label="item.captions"
              :key="index"
            >
              {{item.value}}
            </a-descriptions-item>
          </a-descriptions> 
        </template>
      </vxe-column>
    </vxe-grid>

  methods: {
    getData() {
      this.loading = true;
      const formData = this.$route.query;
      this.itemName = formData.itemName;
      if(formData.itemName === 'HIS') {
        this.patientId = formData.patientId;
        this.projectName = formData.projectName;
        this.dateInfo.startDate = formData.startDate;
        this.dateInfo.endDate = formData.endDate;
      } else if(formData.itemName === 'Record') {
        this.patientId = formData.patientId;
        this.inpatientNo = formData.inpatientNo;
      }
      // 赋值列 && 获取tableData 以及 policy的列头
      if(formData.itemName === 'HIS') {
        this.columns = [
          {field: 'dataType', title: '就诊方式', visible: false},
          {field: 'inpatientNo', title: '住院号', width: 80},
          {field: 'billingNo', title: '单据号', visible: false},
          {field: 'formNo', title:'申请号', visible: false},
          {field: 'settleAccountsDate', title: '结算日期', visible: false},
          {field: 'hospitalBedDate', title: '住院床日', width: 80},
          {field: 'handingTheDate', title: '经办日期', visible: false},
          // 展开操作
          // {type: 'expand', title: '操作', width: 70}
        ];
        
        const datalist = [
          {value: 'dataType', captions: '就诊方式'},
        ];
        
        postAction('/exchange/selectHisByPatientIdAndPrescribeDate', {
          'patientId': this.patientId, 'hisName': this.projectName,
          'prescribeDateStart': this.dateInfo.startDate,
          'prescribeDateEnd': this.dateInfo.endDate,
          'pageNo': 1
        })
        .then(res => {
          const data = res.result;
          this.tableData = data.dataList || [];

          if(data.dataList.violateBehaviorName) {
            this.showRed = true;
          }else {
            this.showRed = false;
          }

          this.resultArg.total = data.dataCount;

          this.publicInfo.patientId = data.patientId;
          if(data.dataList.length !== 0) {
            this.publicInfo.securityId = data.dataList[0].securityId;
            this.publicInfo.idCard = data.dataList[0].idCard;
            this.publicInfo.name = data.dataList[0].name;
            this.publicInfo.gender = data.dataList[0].gender;
            this.publicInfo.patientAge = data.dataList[0].patientAge;
          }
          
        })
        .finally(() => {
          this.loading = false;
        });
      } else if(formData.itemName === 'Record') {
        // this.getList(1);
        // 新增 strat
        this.columns = [
          {field: 'checkinDignoseNames', title: '疾病诊断名称'},
          {field: 'pathologyName', title: '文书名称'},
          {field: 'endDate', title: '病理结束时间', visible: false},
          {field: 'patientId', title: '病人ID'},
          {field: 'idCard', title: '身份证号', visible: false},
          {field: 'sex', title: '性别', width: 50},
          {field: 'hisNames', title: '收费项目名称'},
          {field: 'hospitalCode', title: '医院编码', visible: false},
          {field: 'rowId', title: 'row_id', visible: false},
          {field: 'pathologyType', title: '文书类型'},
          {field: 'bedNo', title: '床号', visible: false},
          {field: 'name', title: '姓名', width: 80},
          {field: 'partitionDate', title: '分区日期', visible: false},
          {field: 'bedTimes', title: '住院床日', width: 80},
          {field: 'hospitalNo', title: '住院号'},
          {field: 'age', title: '年龄', width: 60},
          {field: 'checkinOffice', title: '入院科室'},
          {field: 'startDate', title: '病理开始时间'},
          {field: 'checkoutOffice', title: '出院科室', visible: false},
          // 展开操作
          // {type: 'expand', title: '操作', width: 70}
        ];
        
        postAction('/graph/hospital/tScreeningMonth/emrListByPatientId', {
          'patient_id': this.patientId,
          'hospital_no': this.inpatientNo,
          'pageNo': 1
        })
        .then(res => {
          const data = res.result;
          // this.columns = data.titleList;
          this.tableData = data.dataList || [];
          this.resultArg.total = data.dataCount;
        })
        .finally(() => {
          this.loading = false;
        });
        // 新增 end
      }
    },

我尝试过几种方法，但是都不行，因为刚接触vue，还不太理解，目前可以将展开的按钮显示出来，功能也可以实现，但是不知道怎么将对应的数据放进去！请教！

我想要达到的结果

遇到了什么问题呢