vue 点击展开显示查看更多 点击收起部分隐藏

1.用计算属性，根据源数据和flagMore计算得到showDeptList
2.注意一下！！！计算属性中的名字不能跟data里面重名，否则渲染不出来数据

image.png

超过8个数据，显示查看更多，否则有几个显示几个
点击查看更多，展示所有的数据，汉字改成收起

image.png

直接上代码
html

<div class="column-content">
              <ul>
                <li
                        class="column-li"
                        :class="{ 'active-column': item.selected}"
                        v-for="item in showDeptList"
                        :key="item.deptCode"
                        @click="deptClick(item)"
                >
                  {{item.deptName}}
                </li>
                <li
                        v-if="deptList.length > 7"
                        @click="changeFoldState"
                        class="column-li"
                >
                  {{flagMore?'查看更多':'收起'}}
                </li>
              </ul>
            </div>

data里面定义的

   flagMore: true,
    deptList:[],//源部门数据

methods里面的方法

 //获取部门数据
    getDeptList(){
      recommend({ position: 2 }).then((res) => {
        if (res.status == 0) {
          //先循环在赋值，为了给每一项添加 item.selected
          res.data.map((item) => {
            item.selected = false;
          });
         this.deptList=res.data
        } else {
          this.$toast(res.message);
        }
      }).catch((error) => {
        console.log('接口失败',error);
      });
    },
 //点击部门名称的每一项
    deptClick(data){
      data.selected = !data.selected;
      this.deptCodeList = [];
      this.deptDocList = [];
      this.deptList.map((item) => {
        if (item.selected) {
          this.deptCodeList.push(item.deptCode);
          this.deptDocList.push(item.deptdoc);
        }
      });
      this.checkType();
    },
 checkType() {
      if (
        this.dateType ||
        this.readStatus1 ||
        this.readStatus0 ||
        this.startTime ||
        this.endTime||
       this.deptCodeList.length>0
      ) {
        return (this.isActiveBn = true);
      }
      return (this.isActiveBn = false);
    },

//最后一步很重要，计算属性

  computed: {
    //改属性是根据计算得到（get set），计算属性中的名字不能跟data里面重名
    showDeptList: {
      get() {
        if (this.flagMore) {
          if (this.deptList.length <8) {
            return this.deptList
          }
          let newArr = [];
          for (let i = 0; i < 8; i++) {
            let item = this.deptList[i]
            newArr.push(item)
          }
          return newArr
        }
        return this.deptList
      }
    }
  },