<div class="checkbox">
<el-checkbox v-model="checked" @change="checkAllChange"></el-checkbox>
</div>
<div class="read">已读</div>
<div class="delete">删除</div>
</div>
<div class="table-body">
<el-checkbox-group v-model="checkModel" @change="checkChange">
<div class="table-body-item" :class="{'isActive': changeIndex==index}" v-for="(item, index) in newsList" :key="item.id" @click="changeIndex=index">
<div class="checkbox">
<el-checkbox :label="item.id" :key="item.id"></el-checkbox>
</div>
<div class="status" :title=item.status>{{item.status}}</div>
<div class="detail" @click="toDetail(item.id)"><span>{{item.detail}}</span></div>
<div class="date">{{item.date}}</div>
</div>
</el-checkbox-group>
</div>
data() {
return {
changeIndex: -1,
checked: false, // 是否全选
checkModel: [],
newsList: [
{
id: 1,
background: 0,
status: '企业升级审批结果哈车费好几次是分局纪念册返奖率鹅夫人开吗哈哈哈哈哈',
detail: '您的企业升级审批已通过!请点击查看详情',
date: '2020年11月9日'
},
{
id: 2,
background: 0,
status: '订单审批结果',
detail: '您的订单xxxxx审批已通过!请点击查看详情',
date: '2020年11月9日'
},
{
id: 3,
background: 0,
status: '订单发货通知',
detail: '您的订单xxxxx已发货!请点击查看详情',
date: '2020年11月9日'
},
{
id: 4,
background: 0,
status: '营销优惠活动',
detail: '营销优惠活动xxxx火热来袭!请点击查看详情',
date: '2020年11月9日'
},
{
id: 5,
background: 0,
status: '企业升级审批结果哈次是分局纪念册返奖率鹅夫人开吗哈哈哈哈哈',
detail: '您的企业升级审批已通过!请点击查看详情',
date: '2020年11月9日'
}
]
};
},
methods: {
checkChange(value) {
// console.log(value.length, this.checkModel.length);
if (this.checkModel.length === this.newsList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
checkAllChange() {
if (this.checkModel.length !== 0) {
this.checkModel = [];
}
if (this.checked) {
this.newsList.forEach((item) => {
if (this.checkModel.indexOf(item.id) === -1) {
this.checkModel.push(item.id);
}
});
} else {
this.checkModel = [];
}
},
toDetail(id) {
this.$router.push({
path: '/member/detail'
});
}
}
.table-title{
height: .54rem;
background: #F5F5F5;
display: flex;
align-items: center;
border-bottom: .01rem solid #f0f0f0;
.read, .delete{
62px;
height: .30rem;
line-height: .30rem;
background: #fff;
border: 1px solid #eee;
border-radius: .08rem;
text-align: center;
cursor: pointer;
color: #666;
margin-right: .21rem;
}
}
.table-body{
background-color: #fff;
.table-body-item{
display: flex;
height: .55rem;
align-items: center;
color: #333;
border-bottom: .01rem solid #f0f0f0;
.status{
1.55rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail{
margin-left: .51rem;
7.05rem;
span{
cursor: pointer;
}
}
.date{
color: #999;
}
&:last-child{
border-bottom: none;
}
&:hover{
background-color: #f5f5f5;
}
}
.isActive{
background-color: #f5f5f5;
}
}