美文网首页vue
vue 点击展开显示查看更多 点击收起部分隐藏

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

作者: 流泪手心_521 | 来源:发表于2021-07-26 11:20 被阅读0次

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
      }
    }
  },

相关文章

网友评论

    本文标题:vue 点击展开显示查看更多 点击收起部分隐藏

    本文链接:https://www.haomeiwen.com/subject/ftnwmltx.html