1. Implémentation du code:
@row-click="handleRowClick"Lier un événement de clic à la table, l'événement est déclenché lorsque l'utilisateur clique sur la ligne- Parcourez ce qui est obtenu à partir de l'arrière-plan
tableDataet ajoutez un indicateur à chaque élément de celui-ci pour contrôler si la ligne est développée ou nonexpanded - Dans juste un clic des liaisons d'événement, appelez la
toggleRowExpansion(row, expanded)méthode table , le premier paramètre est les données sur lesquelles la ligne a cliqué, le deuxième argument est développé ou non (commetruelorsqu'il est déployé, il estfalseensuite rétracté)
<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. Facile à faire des erreurs
Prenez ici le code ci-dessus comme exemple, mettez la partie js séparément et donnez une erreur courante
<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>
Il n'y a rien de mal à cela à première vue, mais ce code a un problème:
比如，我展开了第一行，但我没把第一行收起来，这时候去点第二行，就需要多点一下, Wow, pas de surprises.
Parce qu'à ce moment, toutes les lignes utilisent la même variable et il n'y a pas de positionnement clair.
