Collapse and hide of table tables in element-ui
el-table folding expansion
Use the el-table component of the elment-ui to fold and expand the table using the default-expand-all attribute to control it to true or false by clicking to complete the collapse and expansion, but it has no effect! ! !
By searching the information, I found that I need to write this way
<el-table
v-if="refreshTable"
:header-cell-style="{background:'#f4f3f9',color:'#606266'}"
:data="deptList"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:default-expand-all="Expand"
:tree-props="{children: 'children', hasChildren: 'hasChildren'
>
-------------Data Settings
data() {
return {
Expand: true,
refreshTable: true,
}
}
-------------Mouse click event
/** Expand/collapse operation */
toggleExpandAll() {
= false
= !
this.$nextTick(() => {
= true
})
},
Set the display and hide of v-if table. Set the default-expand-all. Both must be set as above. Finally, it succeeds. I don’t know the specific principle. Remember this first!
Recently I found that there was a bug in the previous method, which was very difficult to use. I found another simple and easy to use.
this.$..toggleRowExpansion([0]) // Fold all
Get the dom element of the table directly, and then call the element-ui table table toggleRowExpansion to expand and collapse
Implement element-ui table el-table expanding rows
<template> <el-table :data="tableData" style="width: 100%" @row-click="rowClick" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange" ref="tableList">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="right" inline class="demo-table-expand" align="right">
<el-form-item label="Product Name">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Shop to which it belongs">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Product ID">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Shop ID">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Product Category">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Shop Address">
<span>{{ }}</span>
</el-form-item>
<el-form-item label="Product Description">
<span>{{ }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="Product ID" prop="id"></el-table-column>
<el-table-column label="Product Name" prop="name"></el-table-column>
<el-table-column label="describe" prop="desc"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
name: "So delicious eggs",
category: "Jiangxi snacks, snacks and snacks",
desc: "Dutch high-quality evaporated milk, rich and not greasy",
address: "Zhenbei Road, Putuo District, Shanghai",
shop: "Wang Xiaohu's husband and wife store"+'<br>'+"asfdasfafasdfasdfas",
shopId: "10333",
},
{
id: "12987123",
name: "So delicious eggs",
category: "Jiangxi snacks, snacks and snacks",
desc: "Dutch high-quality evaporated milk, rich and not greasy",
address: "Zhenbei Road, Putuo District, Shanghai",
shop: "Wang Xiaohu's husband and wife store",
shopId: "10333",
},
{
id: "12987125",
name: "So delicious eggs",
category: "Jiangxi snacks, snacks and snacks",
desc: "Dutch high-quality evaporated milk, rich and not greasy",
address: "Zhenbei Road, Putuo District, Shanghai",
shop: "Wang Xiaohu's husband and wife store",
shopId: "10333",
},
{
id: "12987126",
name: "So delicious eggs",
category: "Jiangxi snacks, snacks and snacks",
desc: "Dutch high-quality evaporated milk, rich and not greasy",
address: "Zhenbei Road, Putuo District, Shanghai",
shop: "Wang Xiaohu's husband and wife store",
shopId: "10333",
},
],
expands: []
};
},
methods: {
rowClick(row){//Expand when clicking on line this.$(row);
},
expandChange(row,expandedRows){//
let that = this;
if(){//Expand now = [];
if(row){
();
}
}else{//fold = [];
}
},
getRowKeys(row){//The key of row data is used to optimize the rendering of table return ;
}
}
};
</script>
<style scoped>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style><style>//Not effective when scoped is added.demo-table-expand.label{ width:150px; color: #99a9bf;}</style>
-
row-click: Triggered when a row is clicked -
row-key: The key of row data, used to optimize the rendering of talbe -
expand-row-keys: This property can be used to set the current expanded row of the table (required row-key attribute) -
expand-change: Used to trigger when a row is clicked to expand or close (when expanding the row, the second property is expandedRows, and when closing the row, the second property is expanded)
Follow-up questions
There is an operation button column in the list. When the operation button is clicked, row-click will be triggered.
Problem solving
<el-button type="warning" size="mini" circle icon="el-icon-question" @="diagnose"></el-button>
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.