前言:我们最近使用的新框架表格是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 = []
}
},