提交 404db59f 编写于 作者: Neuromancer255's avatar Neuromancer255

多数据视图快速分组组件补充技计数逻辑

上级 005d8efe
...@@ -7,6 +7,17 @@ ...@@ -7,6 +7,17 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
position: relative;
.badge {
--padding-bottom:0;
--padding-end:5px;
--padding-start:5px;
--padding-top:0;
position: relative;
top: -5px;
left: 5px;
background-color: red;
}
.quick-group-tab { .quick-group-tab {
flex: 1; flex: 1;
height: 30px; height: 30px;
...@@ -48,6 +59,14 @@ ...@@ -48,6 +59,14 @@
font-size: 13px; font-size: 13px;
color: #a8a8a8; color: #a8a8a8;
align-items: center; align-items: center;
.badge {
--padding-bottom:0;
--padding-end:5px;
--padding-start:5px;
--padding-top:0;
margin-left: 10px;
background-color: red;
}
} }
.selected { .selected {
color: black; color: black;
......
<template> <template>
<div> <div>
<div class="app-quick-group"> <div class="app-quick-group">
<div :class="{'quick-group-tab':true,'app-seleted-item':isSelectedItem(item) || item.childSelect}" v-for="(item,index) in showItems" :key="index"> <div :class="{'quick-group-tab':true,'app-seleted-item':isSelectedItem(item)}" v-for="(item,index) in showItems" :key="index">
<div <div
:style="{color:item.color}" :style="{color:item.color}"
@click="handleClick(item)" @click="handleClick(item)"
...@@ -11,15 +11,17 @@ ...@@ -11,15 +11,17 @@
<span class="app-quick-item-label">{{item.label}}</span> <span class="app-quick-item-label">{{item.label}}</span>
<ion-icon v-if="item.children" name="caret-down-outline"></ion-icon> <ion-icon v-if="item.children" name="caret-down-outline"></ion-icon>
</div> </div>
<ion-badge class="badge" v-if="isSelectedItem(item) && pageTotal !== 0 && !item.children">{{pageTotal}}</ion-badge>
</div> </div>
</div> </div>
<div ref="child-list" v-if="subItems.length > 0" :class="{'child-list':true,}"> <div ref="child-list" v-if="subItems.length > 0" class="child-list">
<div :class="{'child':true,'selected':item.selected}" v-for="(item,index) in subItems" :key="index" @click="handleClick(item)"> <div :class="{'child':true,'selected':item.selected}" v-for="(item,index) in subItems" :key="index" @click="handleClick(item)">
<span> <span>
<ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon> <ion-icon v-if=" item.iconcls && !Object.is(item.iconcls, '')" :name="item.iconcls"></ion-icon>
<img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" /> <img v-else-if="item.icon && !Object.is(item.icon, '')" :src="item.icon" />
<span>{{item.label}}</span> <span>{{item.label}}</span>
</span> </span>
<ion-badge class="badge" v-if="pageTotal !== 0 && item.selected">{{pageTotal}}</ion-badge>
<ion-icon v-if="item.selected" style="margin-left:auto" name="checkbox-outline"></ion-icon> <ion-icon v-if="item.selected" style="margin-left:auto" name="checkbox-outline"></ion-icon>
</div> </div>
</div> </div>
...@@ -49,6 +51,14 @@ export default class AppQuickGroupTab extends Vue { ...@@ -49,6 +51,14 @@ export default class AppQuickGroupTab extends Vue {
*/ */
@Prop({ default: () => [] }) public items!: Array<any>; @Prop({ default: () => [] }) public items!: Array<any>;
/**
* 快速分组代码表
*
* @type {any[]}
* @memberof ViewQuickGroupTab
*/
@Prop({ default:0 }) public pageTotal!: number;
/** /**
* 渲染列表 * 渲染列表
* *
...@@ -174,14 +184,8 @@ export default class AppQuickGroupTab extends Vue { ...@@ -174,14 +184,8 @@ export default class AppQuickGroupTab extends Vue {
this.subItems.length = 0; this.subItems.length = 0;
this.items.forEach((item:any) => { this.items.forEach((item:any) => {
item.selected = false; item.selected = false;
item.childSelect = false;
}) })
$event.selected = true; $event.selected = true;
this.items.forEach((item:any) => {
if (item.id === $event.pvalue) {
item.childSelect = true;
}
})
this.$emit("valuechange", $event); this.$emit("valuechange", $event);
} }
this.$forceUpdate(); this.$forceUpdate();
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册