关于element-ui table 用按钮控制 使table 全部打开和隐藏
1 首先要用到他的一个属性 row-key
2 还有就是 expand-row-keys
第一步
// An highlighted block
<el-button type="primary" @click="hangshou">全部显示</el-button>
<el-button type="success" @click="hanghide">全部隐藏</el-button>
<el-table
:data="tableData5"
style="width: 100%"
:expand-row-keys="expends"
:row-key="getRowKeys">
<el-table-column type="expand">
<template slot-scope="props">
<el-table
ref="multipleTable"
:data="tableData3"
style="width: 100%">
<el-table-column
label="日期"
align="left">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
align="center"
width="150">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="150"
align="center"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名称"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
第二步
data () {
return {
expends: [],
},
methods: {
getRowKeys (row) {
return row.id
},
// 全部隐藏
hanghide () {
this.expends = []
},
// 全部显示
hangshou () {
var tranId = this.tableData5.map(item => item.id)
this.expends = tranId
},
这样就能应按钮控制table 的去全部展示 和 隐藏了