1. Code implementation:
@row-click="handleRowClick"Bind a click event to the table, the event is triggered when the row is clicked- Traverse what is obtained from the background,
tableDataand add a flag to each item of it to control whether the line is expanded or notexpanded - In just a click event bindings, call the table
toggleRowExpansion(row, expanded)method, the first parameter is the data that the line clicked, the second argument is expanded or not (astruewhen deployed, isfalsethen retracted)
<template>
<el-table
:data="tableData"
style="width: 100%"
ref="expandTable"
@row-click="handleRowClick"
>
<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-item label="所属店铺">
<span>{
{
props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{
{
props.row.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{
{
props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{
{
props.row.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{
{
props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{
{
props.row.desc }}</span>
</el-form-item>
</el-form>
</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>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
},
{
id: "12987123",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
},
{
id: "12987125",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
},
{
id: "12987126",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
}
]
};
},
mounted() {
// tableData是从后台获取，则这个遍历就放在获取tableData那个地方
this.tableData.forEach(val => {
this.$set(val, "expanded", false);
});
},
methods: {
handleRowClick(row) {
row.expanded = !row.expanded;
this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
}
}
};
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
2. Easy to make mistakes
Here take the above code as an example, put the js part separately, and give a common mistake
<script>
export default {
data() {
return {
tableData: [
{
id: "12987122",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
},
{
id: "12987123",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶，奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333"
}
]
expanded: false // 在这里定义了展开与否的标志
};
},
methods: {
handleRowClick(row) {
this.expanded = !this.expanded; // 这里也更改了它的值
this.$refs.expandTable.toggleRowExpansion(row, this.expanded);
}
}
};
</script>
There is nothing wrong with it at first glance, but this code does have a problem:
比如，我展开了第一行，但我没把第一行收起来，这时候去点第二行，就需要多点一下, Wow, no surprises.
Because at this time, all rows use the same variable, and there is no clear positioning.
