实现效果:点击这一行的任何一个位置都开展开子集。

element 实例效果:

点击图标展开这一行。

<el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>

数据:

tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

实际实现效果代码

<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="key" :default-expand-all="false"
        :tree-props="{children: 'svnList'}" @row-click="toggleRowExpansion" ref="toggleRowExpansion">
        <el-table-column prop="releaseName" label="发布名称">
        </el-table-column>
        <el-table-column prop="vsnName" label="版本" width="180">
        </el-table-column>
        <el-table-column prop="solutionName" label="解决方案">
          <template slot-scope="scope">
            <span v-if="scope.row.children"><!--3--></span>
            <span class="jump" v-else @click="jump(scope.row)"><!--4--></span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述">
        </el-table-column>
        <el-table-column prop="pblsStatus" label="状态">
          <template slot-scope="scope">
            <el-switch v-if="!scope.row.children" v-model="scope.row.pblsStatus" class="demo" active-color="#1890FF"
              active-text="上架" inactive-color="#C0C0C0" inactive-text="下架" :active-value="true" :inactive-value="false"
              @change="activeStatusChange($event,scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text">详情</el-button>
            <el-button @click="handleAdd(scope.row)" type="text" v-if="!scope.row.children">新增版本</el-button>
            <el-button @click="handleDel(scope.row)" type="text" class="delete-btn" v-if="!scope.row.children">删除
            </el-button>
            <el-button @click="handleDelVersion(scope.row)" type="text" class="delete-btn" v-if="scope.row.children">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

toggleRowExpansion 方法:

 // 点击el-table的每一行展开
      toggleRowExpansion(row) {
        this.$refs.toggleRowExpansion.toggleRowExpansion(row, row.expanded);
      },
更新于