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
}
}
},
网友评论