xw_admin/src/views/setting/role/members.vue

<template>
	<el-scrollbar class="scrollbar" height="100%">
		<div class="customTable">
			<div :class="list.length===0?'thenTitle thenTitleBottom':'thenTitle'">
				<div class="tr">
					<div class="th btnCheckout"><el-checkbox @change="allCheckChange" :indeterminate="isCheckFun" v-model="checkedFun" :size="size"></el-checkbox></div>
					<div class="th seq">序号</div>
					<div class="th name">姓名</div>
					<div class="th mobile">手机号</div>
					<div class="th email">邮箱</div>
					<div class="th department">部门</div>
				</div>
			</div>
			<div :class="list.length==0?'tableBody tableBodyNull':'tableBody'">
				<template v-if="list.length>0">
					<div class="tr" v-for="(item,index) in list" :key="index">
						<div class="td btnCheckout"><el-checkbox v-model="item.checked" :size="size"></el-checkbox></div>
						<div class="td seq">{{index+1}}</div>
						<div class="td name">{{item.name}}</div>
						<div class="td mobile">{{item.mobile}}</div>
						<div class="td email">{{item.email}}</div>
						<div class="td department">{{item.department}}</div>
					</div>
				</template>
				<el-empty v-else :description="emptyText" :image-size="100"></el-empty>
			</div>
		</div>
	</el-scrollbar>
</template>

<script>
export default {
	name: "members.vue",
	data(){
		return{
			size: "default",
			list:[],
			emptyText:'暂无数据'
		}
	},
	props:{
		data:{
			type:Array,
		}
	},
	watch:{
		data(val){
			if(val){
				val.forEach(item=>{
					item.checked = false;
				})
				this.list = JSON.parse(JSON.stringify(val));
			}
		},
	},
	computed:{
		checkedFun(){
			let isTrue = false;
			let num = this.list.length;
			let checkNum = this.list.filter((item)=>item.checked).length;

			isTrue = checkNum>0 && checkNum == num?true:false;
			return isTrue
		},
		isCheckFun(){
			let isTrue = false;
			let num = this.list.length;
			let checkNum = this.list.filter((item)=>item.checked).length;

			isTrue = (checkNum>0 && checkNum == num) || checkNum==0 ?false:true;
			return isTrue
		},
	},
	mounted() {

	},
	methods:{
		allCheckChange(e){
			this.list.forEach(item=>{
				if(item){
					item.checked = e;
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.scrollbar{
	:deep(.el-scrollbar__view){
		height: 100%;
	}
}
.btnCheckout{
	flex-basis: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.seq{
	flex-basis: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.name{
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.department{
	flex-basis: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobile{
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.email{
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.customTable{
	border: 1px solid var(--el-border-color-light);
	font-size: 12px;
	display: flex;
	flex-direction: column;
}
.thenTitle .tr {
	display: flex;
	align-items: stretch;
	border-bottom:1px solid var(--el-border-color-light);
	height: 40px;
	.th{
		padding: 0 10px;
		border-left: 1px solid var(--el-border-color-light);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.th:first-child{
		border-left: 0;
	}
}
.thenTitleBottom .tr{
	border-bottom: 0;
}
.tableBodyNull{
	border-top:1px solid var(--el-border-color-light);
}
.tableBody{
	flex: 1;
}
.tableBody .tr{
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	border-bottom:1px solid var(--el-border-color-light);
	.td{
		padding: 0 10px;
		border-left: 1px solid var(--el-border-color-light);
		overflow: hidden;
		.nextTd{
			display: flex;
			align-items: center;
			border-bottom:1px solid var(--el-border-color-light);
		}
		.nextTd:last-child{
			border-bottom: 0;
		}
	}
	.td:first-child{
		border-left: 0;
	}
	.tdChild{
		flex: 1;
		padding: 0;
		border-left: 1px solid var(--el-border-color-light);
		.tdName:first-child{
			border-left: 0;
		}
		.tdName{
			border-left: 1px solid var(--el-border-color-light);
			padding: 0 10px;
		}
	}
}
.tableBody .tr:last-child{
	border-bottom: 0;
}
</style>