vue (三)｜ element篇

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

这么一个功能：表格风琴样式展开详细界面

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 = []
        }
      },