105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<el-table :data="data" :max-height="tableHeight">
|
|
<el-table-column prop="name" label="数据集名称" />
|
|
<el-table-column label="管理" align="center">
|
|
<template #header>
|
|
<el-checkbox
|
|
v-model="allChecked[MANAGE]"
|
|
label="管理"
|
|
@change="handleCheckAllChange($event, MANAGE)"
|
|
/>
|
|
</template>
|
|
<template #default="{ row }">
|
|
<el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="使用" align="center">
|
|
<template #header>
|
|
<el-checkbox
|
|
v-model="allChecked[USE]"
|
|
label="使用"
|
|
@change="handleCheckAllChange($event, USE)"
|
|
/>
|
|
</template>
|
|
<template #default="{ row }">
|
|
<el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from 'vue'
|
|
|
|
const MANAGE = 'MANAGE'
|
|
const USE = 'USE'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
id: String
|
|
})
|
|
|
|
const emit = defineEmits(['update:data'])
|
|
const allChecked: any = ref({
|
|
[MANAGE]: false,
|
|
[USE]: false
|
|
})
|
|
|
|
const tableHeight = ref(100)
|
|
|
|
watch(
|
|
() => props.data,
|
|
(val) => {
|
|
Object.keys(allChecked.value).map((item) => {
|
|
allChecked.value[item] = compare(item)
|
|
})
|
|
emit('update:data', val)
|
|
},
|
|
{
|
|
deep: true
|
|
}
|
|
)
|
|
|
|
function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
|
|
if (val) {
|
|
props.data.map((item: any) => {
|
|
item.operate[Name] = true
|
|
})
|
|
} else {
|
|
props.data.map((item: any) => {
|
|
item.operate[Name] = false
|
|
})
|
|
}
|
|
}
|
|
function checkedOperateChange(Name: string | number, row: any) {
|
|
if (Name === MANAGE) {
|
|
props.data.map((item: any) => {
|
|
if (item.id === row.id) {
|
|
item.operate[USE] = true
|
|
}
|
|
})
|
|
}
|
|
allChecked.value[Name] = compare(Name)
|
|
}
|
|
|
|
function compare(attrs: string | number) {
|
|
const filterData = props.data.filter((item: any) => item?.operate[attrs])
|
|
return props.data.length > 0 && filterData.length === props.data.length
|
|
}
|
|
|
|
onMounted(() => {
|
|
tableHeight.value = window.innerHeight - 300
|
|
window.onresize = () => {
|
|
return (() => {
|
|
tableHeight.value = window.innerHeight - 300
|
|
})()
|
|
}
|
|
Object.keys(allChecked.value).map((item) => {
|
|
allChecked.value[item] = compare(item)
|
|
})
|
|
})
|
|
</script>
|
|
<style lang="scss" scope></style>
|