<template>
|
<div class="res-line-wrapper">
|
<div class="res-line-times">
|
<flex-box no-header size="mini">
|
<div class="checkbox-wrapper">
|
<div class="checkbox-wrapper-header">
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
</div>
|
<div class="checkbox-group-wrapper">
|
<el-checkbox-group v-model="checkedTimes" @change="handleCheckedTimesChange">
|
<div class="checkbox-item" v-for="item in times" :key="item">
|
<el-checkbox :label="item">{{item}}</el-checkbox>
|
</div>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</flex-box>
|
</div>
|
<div class="res-line-content">
|
<flex-box no-header size="mini"></flex-box>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FlexBox from "@/components/FlexBox";
|
export default {
|
name: "resLineContrast",
|
components: {
|
FlexBox
|
},
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return []
|
},
|
updateTime: {
|
type: Number,
|
default: 0,
|
}
|
},
|
},
|
data() {
|
return {
|
checkedTimes: [],
|
times: [],
|
checkAll: false,
|
isIndeterminate: false,
|
}
|
},
|
methods: {
|
handleCheckAllChange(val) {
|
let times = this.times.map(item=>{
|
return item;
|
});
|
this.checkedTimes = val ? times : [];
|
this.isIndeterminate = false;
|
},
|
handleCheckedTimesChange(value) {
|
let checkedCount = value.length;
|
this.checkAll = checkedCount === this.times.length;
|
this.isIndeterminate = checkedCount > 0 && checkedCount < this.times.length;
|
}
|
},
|
mounted() {
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.res-line-wrapper {
|
display: flex;
|
height: 100%;
|
}
|
.res-line-times {
|
padding: 0 0 0 8px;
|
}
|
.res-line-content {
|
flex: 1;
|
padding: 0 8px;
|
}
|
.checkbox-item {
|
padding-bottom: 8px;
|
}
|
.checkbox-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-width: 190px;
|
}
|
.checkbox-wrapper-header {
|
padding: 8px 16px;
|
}
|
.checkbox-group-wrapper {
|
flex: 1;
|
overflow-y: scroll;
|
padding: 0 16px;
|
}
|
</style>
|
