vue 列表默认隐藏部分，点击显示更多按钮 同页面多个列表使用_van-row 隐藏

项目过程中需求我要在动态循环的数个产品列表中让每个产品列表的的详情列表默认显示三条，点击显示更多按钮则全部显示，再次点击此按钮则回到隐藏到只剩三条的状态。

完成效果展示

首先我们先渲染好产品列表

<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <div>
        <div class="mer-subnav">
          <van-row class="mer-title">
            <van-col span="8">订单</van-col>
            <van-col span="6">手数</van-col>
            <van-col span="10">盈亏金额</van-col>
          </van-row>
          <div class="mer-list" v-for="(value,i) in item.sublist" :key="i">
            <van-row class="mer-content">
              <van-col span="8">{{value.company}}</van-col>
              <van-col span="6">{{value.ss}}</van-col>
              <van-col span="10">${{value.yq}}</van-col>
            </van-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
         {
          name:'苹果公司',
          sublist: [
            {company: "苹果公司1",ss: 0.1,yq: 100},
            {company: "苹果公司2",ss: 0.1,yq: 100},
            {company: "苹果公司3",ss: 0.1,yq: 1000},
            {company: "苹果公司4",ss: 0.1,yq: 1000},
            {company: "苹果公司5",ss: 0.1,yq: 100 },
          ]
        },
         {
          name:'香蕉公司',
          sublist: [
            {company: "香蕉公司1",ss: 0.1,yq: 100},
            {company: "香蕉公司2",ss: 0.1,yq: 100},
            {company: "香蕉公司3",ss: 0.1,yq: 1000},
            {company: "香蕉公司4",ss: 0.1,yq: 1000},
            {company: "香蕉公司5",ss: 0.1,yq: 100 },
          ]
        },
        {
          name:'鸭梨公司',
          sublist: [
            {company: "鸭梨公司1",ss: 0.1,yq: 100},
            {company: "鸭梨公司2",ss: 0.1,yq: 100},
            {company: "鸭梨公司3",ss: 0.1,yq: 1000},
            {company: "鸭梨公司4",ss: 0.1,yq: 1000},
            {company: "鸭梨公司5",ss: 0.1,yq: 100 },
          ]
        },
      ], 
    };
  },
  methods: {
  },
};
</script>

<style scoped>
.mer-subnav {
    width: 100%;
    height: 28px;
    line-height: 28px;
    margin-top: 10px;
  }
  .mer-title {
    width: 92%;
    margin: 0 auto;
  }
  .mer-content {
    width: 92%;
    margin: 0 auto;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

现在我们列表渲染成功之后的样子是这样的

定义点击click时间showMore，带入index可以让每个显示更多按钮带有唯一性

 methods: {
  showMore(index) {
    if (this.isShow===index){
      this.isShow=''
    }else{
      this.isShow= index;
    }
  }
1
2
3
4
5
6
7
8

当我们点击的isShow的值等于index时，此时显示点击按钮所在列表的全部信息，否则隐藏部分 只显示三条信息，所以我们在子列表循环部分加上v-show

 <div  v-for="(value,i) in item.sublist" :key="i" v-show="i<(isShow===index ?  list[index].sublist.length:2)">
1

然后我们添加进显示更多按钮，如果isShow与点击事件index相同，那么显示‘点击收起’，不相等则按钮显示点击展开

 <div class="order-show" @click="showMore(index)">
            <img class="order-show-pic" :src='isShow===index
        ? require("../../../assets/images/showclose.png")
        : require("../../../assets/images/showall.png")' />
            <span class="oder-show-content">{{isShow===index ? "点击收起" : "点击显示更多"}}</span>
          </div>
1
2
3
4
5
6

在data中定义isShow

data(){return{isShow:''}}
1

下面放完整代码

<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <div>
        <div class="mer-subnav">
          <van-row class="mer-title">
            <van-col span="8">公司</van-col>
            <van-col span="6">小数</van-col>
            <van-col span="10">盈亏</van-col>
          </van-row>
          <div v-for="(value,i) in item.sublist" :key="i" v-show="i<(isShow===index ?  list[index].sublist.length:3)">
            <van-row class="mer-content">
              <van-col span="8">{{value.company}}</van-col>
              <van-col span="6">{{value.ss}}</van-col>
              <van-col span="10">${{value.yq}}</van-col>
            </van-row>
          </div>
        </div>

          <div class="order-show" @click="showMore(index)">
            <img class="order-show-pic" :src='isShow===index
        ? require("../../../assets/images/showclose.png")
        : require("../../../assets/images/showall.png")' />
            <span class="oder-show-content">{{isShow===index ? "点击收起" : "点击显示更多"}}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rytModalconfirm:false,
      isShow:'',
      list: [
         {
          name:'苹果公司',
          sublist: [
            {company: "苹果公司1",ss: 0.1,yq: 100},
            {company: "苹果公司2",ss: 0.1,yq: 100},
            {company: "苹果公司3",ss: 0.1,yq: 1000},
            {company: "苹果公司4",ss: 0.1,yq: 1000},
            {company: "苹果公司5",ss: 0.1,yq: 100 },
          ]
        },
         {
          name:'香蕉公司',
          sublist: [
            {company: "香蕉公司1",ss: 0.1,yq: 100},
            {company: "香蕉公司2",ss: 0.1,yq: 100},
            {company: "香蕉公司3",ss: 0.1,yq: 1000},
            {company: "香蕉公司4",ss: 0.1,yq: 1000},
            {company: "香蕉公司5",ss: 0.1,yq: 100 },
          ]
        },
        {
          name:'鸭梨公司',
          sublist: [
            {company: "鸭梨公司1",ss: 0.1,yq: 100},
            {company: "鸭梨公司2",ss: 0.1,yq: 100},
            {company: "鸭梨公司3",ss: 0.1,yq: 1000},
            {company: "鸭梨公司4",ss: 0.1,yq: 1000},
            {company: "鸭梨公司5",ss: 0.1,yq: 100 },
          ]
        },
      ], 
    };
  },
  methods: {
    showMore(index) {
      if (this.isShow===index){
        this.isShow=''
      }else{
        this.isShow= index;
      }
    }
  },
};
</script>

<style scoped>
.mer-subnav {
    width: 100%;
    height: 28px;
    line-height: 28px;
    background: rgba(245, 245, 245, 1);
    margin-top: 10px;
  }
  .mer-title {
    width: 92%;
    margin: 0 auto;
    color: #8c8c8c;
  }
  .mer-content {
    width: 92%;
    margin: 0 auto;
  }
  /* 显示隐藏 */
  .order-show {
    width: 40%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f6665d;
  }
  .order-show-pic {
    margin: 10px;
    width: 14px;
    height: 14px;
  }
  .mer-list {
    height: 30px;
  }
  .mer-list-img {
    width: 24px;
    height: 12px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

以上就是实现的完整方式了，有点啰嗦了，下次一定好好改进。