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

最新推荐文章于 2024-09-25 16:27:05 发布

蓝胖子的多啦A梦

最新推荐文章于 2024-09-25 16:27:05 发布

阅读量2.5k

点赞数 1

分类专栏： vue element js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Maxueyingying/article/details/126894253

版权

vue 同时被 3 个专栏收录

98 篇文章 4 订阅

订阅专栏

67 篇文章 1 订阅

订阅专栏

element

51 篇文章 0 订阅

订阅专栏

"在Element UI的Table组件中添加树形结构时遇到点击折叠图标后，图标消失且数据未正常展示的问题。经过排查发现是由于给table添加了ref='table'导致的冲突。解决方案是将ref值改为其他名称，如'ref="tableRef"',从而避免了关键字冲突，实现了正常的树形结构折叠效果。"

摘要由CSDN通过智能技术生成

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>