vue element表格 手风琴展开实现

问题

网上有很多都是设置 row-key、expand-row-keys属性来达到表格的手风琴展开模式，但是不知道为何我使用的element-ui 最新版本（2.14）使用这种方法一直提示没有设置row-key 属性，但是明明设置了row-key。

可能是版本问题，我把element-ui版本换到2.7后使用上边那种方法就不会报错了。

但是我需要使用到最新element-ui版本的组件，所以使用了另一种方法：

• 设置一个按钮替代默认的展开标志<,每次点击按钮的时候关闭所有的行，然后展开当前行。

参考博客

关键代码

• 给要展开的表格设置一个别名: ref="expand_table"
• 在操作中设置一个’‘查看详情’'按钮, 绑定一个点击事件@click="toogleExpand(scope.row)"
• 将需要展开的行的对应列<el-table-column type="expand" width="1">放在操作列的后边，并设置width宽度为1隐藏。

    <div style="margin-top: 1rem;text-align: center">
      <template>
        <el-table :data="tctableData" border style="width: 100%"
                  ref="expand_table"
                  @expand-change="get_testcase_list">
          <el-table-column prop="module_name" label="测试模板名称" align="center"></el-table-column>
          <el-table-column prop="module_type" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handlemodify(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="text" @click="toogleExpand(scope.row)" icon="el-icon-view">查看详情</el-button>
              <el-button @click.native.prevent="deleteRow(scope.$index,scope.row,tctableData)" type="text" size="mini" icon="el-icon-delete" style="color: red"> 移除</el-button>
            </template>
          </el-table-column>
          <el-table-column type="expand" width="1">
            <template slot-scope="scope">
              <el-table :data="testcase_list" border style="width: 100%" ref="test_case_table" height="250">
                <el-table-column prop="test_action" label="测试用例编码" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="case_name" label="测试用例名称" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="preset_data" label="预置数据" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="input_data" label="测试输入数据" align="center"
                                 :show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="center" width="400">
                  <template slot="header" slot-scope="search_scope">
                    <el-autocomplete
                      clearable
                      size="mini"
                      v-model="testcase_input"
                      popper-class="my-autocomplete"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入测试用例名称"
                      @select="handleSelect">
                      <template slot-scope="{ item }">
                        <div class="name">{{ item.case_name }}</div>
                        <span class="addr">{{ item.case_type }}</span>
                      </template>
                    </el-autocomplete>
                    <el-button size="mini" type="primary" @click="reset_input">重置
                    </el-button>
                  </template>
                  <template slot-scope="action_scope">
                    <el-button size="mini" @click="handlemodify_testcase(action_scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click.native.prevent="deleteRow_testcase(action_scope.$index, action_scope.row, scope.row.children)"> 移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[3, 5, 10]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total_count">
          </el-pagination>
        </div>
      </template>
    </div>

查看详情方法代码

  // 关闭所有行，展开当前行
  toogleExpand(row) {
    let $table = this.$refs.expand_table
    this.tctableData.map((item) => {
      if ((row.case_template_id !== item.case_template_id)) {
        $table.toggleRowExpansion(item, false)
      }
    })
    $table.toggleRowExpansion(row)
  },

• 先将所有行（除掉当前行）的展开状态设置为关闭，然后将当前行设置为打开。

• row.case_template_id为行的内容中的数据：
  

界面展示