前言:我们最近使用的新框架表格是vxe-table,这个组件功能十分强大,但是我还不太熟,最终还是用element

image.png 这么一个功能 代码撸起

vue篇

<el-table
      :data="tableData"
      style="width: 100%"
      @expand-change="expandSelect"
      :row-key='getRowKeys'
      :expand-row-keys="expands"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column width="130" prop="receiptOrder" label="收货单号"/>
      <el-table-column width="85" prop="whCode" label="供应商号"/>
      <el-table-column width="130" prop="actualArrivaltime" label="实际到货时间"/>
      <el-table-column width="200" prop="operation" label="right">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">{{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

解释: @expand-change="expandSelect" 点击事件 :row-key='getRowKeys' 获取当前行ID :expand-row-keys="expands" 当前行值

Node.js篇

data() {
      return {
        expands: [],
        getRowKeys(row) {
          return row.id
        },
      }
    },

// 折叠面板每次只能展开一行
      expandSelect(row, expandedRows) {
        // expandedRows.length = 0 为关闭,否则开启
        var that = this
        if (expandedRows.length) {
          that.expands = []
          if (row) {
            that.expands.push(row.id)
          }
        } else {
          that.expands = []
        }
      },