vue 显示更多，收起功能_vue更多和收起

标签显示更多收起功能

1. 第一种：
   效果图：
   合起来时：

展开时：

上代码：

<div class="demo-input-suffix" style="margin-bottom:30px;">
        <el-collapse-transition>
          <div class="selectheader">
            达人分类:
            <div v-for="(item,index) in tagBtnList" :key="index" style="display:inline-block;">
              <el-button
                size="small"
                :class="{active:item.value==activeTag}"
                v-if="index<=tagBtnListLength"
                @click="selectBtnTag(item.value)"
              >{{item.label}}</el-button>
            </div>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-arrow-down"
              @click="showMore()"
              v-if="tagBtnList.length>3"
            >{{showBtnTags?"更多":"收起"}}</el-button>
          </div>
        </el-collapse-transition>
      </div>



  data() {
    return {
      activeTag: 0,
      tagBtnListLength: 3,
      showBtnTags: true,
      tagBtnList: [
        { value: 0, label: "全部" },
        { value: 1, label: "分类1" },
        { value: 2, label: "分类2" },
        { value: 3, label: "分类3" },
        { value: 4, label: "分类4" },
        { value: 5, label: "分类5" }
      ]
   }
},
 methods: {
    selectBtnTag(val) {
      this.activeTag = val;
    },
    showMore() {
      if (!this.showBtnTags) {
        this.tagBtnListLength = 3;
      } else {
        this.tagBtnListLength = this.tagBtnList.length;
      }
      this.showBtnTags = !this.showBtnTags;
    }

<style lang="scss" scoped>
//选中标签样式
.active {
  color: #409eff;
}
</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

2. 第二种：
   效果图：
   合起来时：
   
   展开时：
   
   上代码：

       <el-row>
          <el-col :span="12">
            <h3 class="title">
              最近拜访记录
              <el-button
                type="text"
                @click.stop="seeMore()"
                v-if="etailtabledata.customerVisitList.length>3"
                class="seemore"
              >{{showmore?"更多":'收起'}}</el-button>
            </h3>
          </el-col>
        </el-row>
        <div>
          <el-row v-for="(item,index) in showMorecustomerVisitList" :key="index" class="mag10">
            <el-col :span="12" class="mag5">拜访日期：{{item.visitDate}}</el-col>
            <el-col :span="12" class="mag5">拜访人姓名：{{item.visitName}}</el-col>
            <el-col :span="24" class="mag5">拜访详情：{{item.visitDetail}}</el-col>
          </el-row>
          <el-row v-if="etailtabledata.customerVisitList.length==0">
            <el-col :span="24" class="mag5" align="center">
              <h4>{{nodata}}</h4>
            </el-col>
          </el-row>
        </div>


  data() {
    return {
     
     nodata: "暂无数据",
     showmore: true,
     etailtabledata:{
    customerVisitList: [
            {
                "visitName":"测试4",
                "visitDetail":"测试4",
                "visitDate":"2020-10-17",
                "createId":null
            },
            {
                "visitName":"测试",
                "visitDetail":"测试2",
                "visitDate":"2020-10-16",
                "createId":null
            },
            {
                "visitName":"测试",
                "visitDetail":"测试",
                "visitDate":"2020-10-15",
                "createId":null
            },
            {
                "visitName":"测试",
                "visitDetail":"测试0",
                "visitDate":"2020-10-14",
                "createId":null
            }
         ],
      }
    }
 },
  computed: {
    showMorecustomerVisitList: {
      get: function() {
        if (this.showmore) {
          if (this.etailtabledata.customerVisitList.length < 3) {
            return this.etailtabledata.customerVisitList;
          }
          let newArr = [];
          for (var i = 0; i < 3; i++) {
            let item = this.etailtabledata.customerVisitList[i];
            newArr.push(item);
          }
          return newArr;
        }
        return this.etailtabledata.customerVisitList;
      },
      set: function(val) {
        this.showMorecustomerVisitList = val;
      }
    }
  },
 methods: {
     seeMore() {
      this.showmore = !this.showmore;
    }
   } 


<style lang="scss" scoped>
.seemore {
  padding: 0px 0px 0px 15px;
}
</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

文字显示更多收起功能

效果图：


上代码：

            <div class="text-tip" v-for="(item,index) in list" :key="index">
              <span :ref="'content' + index">{{ transformText(item.text) }}</span>
              <span class="more" :ref="'more' + index" v-if="item.text.length > 30"
                @click="showMore(index, item)">展开</span>
            </div>
            list:[
            {text:'业绩比较基准不代表产品未来表现和实际收益业绩比较基准不代表产品未来表现和实际收益'},
            {text:'业绩比较基准不代表产品未来表现和实际收益业绩比较基准不代表产品未来表现和实际收益'},
            {text:'业绩比较基准不代表产品未来表现和实际收益业绩比较基准不代表产品未来表现和实际收益'}
            ]

方法：
    // 展开收起
    transformText(v) {
      if (v.length > 30) {
        return v.slice(0, 26) + ' .....'
      } else {
        return v
      }
    },
    showMore(index, data) {
      if (this.$refs['more' + index][0].innerHTML == '展开') {
        this.$refs['more' + index][0].innerHTML = '    收起'
        this.$refs['content' + index][0].innerHTML = data.text
      } else {
        this.$refs['more' + index][0].innerHTML = '展开'
        this.$refs['content' + index][0].innerHTML = data.text.slice(0, 26) + ' .....'
      }
    },

  .text-tip {
    margin-top: 16px;
    padding:8px 8px 16px;
    background: #999999;
    color: #666666;
    line-height: 30px;
    border-radius: 4px;
    font-size:12px;
    .more {
      color: blue;
      margin-left: 8px;
    }
  }
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