vue element table树形数据表格点击折叠icon icon消失，数据也并没有展示出来（已解决）

小半 • 2023年1月18日下午6:14 • 前端开发 • 阅读 278

bug：因需求，table表格中加入了树形结构，本以为很简单，结果发现了一个问题：

就是点击折叠icon。icon消失了，并且数据也没有展示出来，teble又变成了没有加入树形结构时的状态了

看了很多网上的博客以及教程，并没有解决掉，又看了官网，发现也是没问题的，最后就一遍一遍的试。发现是加了ref=“table”，影响了折叠效果

感觉应该是和关键字撞到了一起，所造成的问题，将ref=“table”改个名字就好啦

修改后：其他的步骤都是和官网一样的哈~

修改后正确效果：

点击-展开，点击-再收回

完整代码：

<el-table
      ref="tableRef"
      row-key="id"
      v-loading="crud.loading"
      :header-cell-style="{ color: '#FFF', background: '#333' }"
      :cell-style="{ color: '#FFF', background: '#333' }"
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'barcode', order: 'descending' }"
      @selection-change="crud.selectionChangeHandler"
      @sort-change="sortChange"
      :tree-props="{
        children: 'children',
        hasChildren: 'hasChildren',
      }"
    >
      <template slot="empty">
        <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
      </template>
      <el-table-column
        type="selection"
        width="50"
        :reserve-selection="true"
        fixed="left"
      />
      <el-table-column
        prop="barcode"
        :sortable="true"
        :label="$t('NeoLight.barcodeNo')"
        width="180"
      />
      <el-table-column
        prop="partNumber"
        :sortable="true"
        :label="$t('NeoLight.stockNo')"
        width="150"
      />
      <el-table-column
        prop="produceDate"
        :sortable="true"
        :label="$t('NeoLight.produceDate')"
      />
      <el-table-column
        prop="expireDate"
        :sortable="true"
        :label="$t('NeoLight.expireDate')"
      />
      <!-- 批次 -->
      <el-table-column
        prop="batch"
        :sortable="true"
        :label="$t('barcode.batch')"
      />
      <!-- 供应商 -->
      <el-table-column
        prop="provider"
        :sortable="true"
        :label="$t('storagePos.providerNumber')"
      />
      <el-table-column
        prop="posName"
        :sortable="true"
        :label="$t('NeoLight.storageNo')"
      />
      <el-table-column
        prop="lockName"
        :sortable="true"
        :label="$t('workOrder.workNo')"
      />
      <el-table-column
        prop="amount"
        :sortable="true"
        :label="$t('NeoLight.amount')"
      />
      <!-- 首次入库时间 -->
      <el-table-column
        prop="firstPutInDate"
        :sortable="true"
        :label="$t('NeoLight.firstPutInDate')"
      />
      <el-table-column
        prop="putInDate"
        :sortable="true"
        :label="$t('NeoLight.putInDate')"
      />
      <el-table-column
        :label="$t('storagePos.operation')"
        width="150px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-tickets"
            size="mini"
            type="primary"
            @click="output(scope.$index, scope.row)"
          >
            {{ $t("NeoLight.workout") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>