EDFS-MCU/src/views/stationData/component/pointCheckbox.vue

<template>
  <div class="w-320 flex h-full" v-loading="loadingPoints" element-loading-text="数据加载中...">
    <div class="flex-1">
      <template v-if="!pointList.length">
        <el-empty></el-empty>
      </template>
      <el-scrollbar class="scroll" v-else>
        <el-checkbox-group v-model="checkPointList" class="point-checks" @change="changePoints">
          <template v-for="(item, index) in pointList" :key="item">
            <el-checkbox :label="item.label" :value="item"/>
          </template>
        </el-checkbox-group>
      </el-scrollbar>
    </div>
    <el-divider direction="vertical" style="height: 100%;"/>

  </div>

</template>

<script setup lang="ts">
import type { IMyPoint } from "@/views/stationData/type";

const emit = defineEmits<{
  'onchange-points': [IMyPoint[]]
}>()

interface Props {
  pointList: Array<{
    label: string
    addr: string
  }>
  loadingPoints: boolean
}

const props = withDefaults(defineProps<Props>(), {
  pointList: () => []
})

const checkPointList = ref<any>([])

function changePoints() {
  emit('onchange-points', checkPointList.value)
}

function clearCheck() {
  checkPointList.value = []
}

function getCheckList() {
  return checkPointList.value
}

defineExpose({
  clearCheck,
  getCheckList
})

</script>


<style lang="scss">
.point-checks {
  display: flex;
  flex-direction: column;
  align-items: start;


  :deep(.el-checkbox__inner) {
    width: 20px;
    height: 20px;
  }

  :deep(.el-checkbox__inner::after) {
    width: 4px;
    height: 8px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-width: 3px;
    // border: 1px solid #ffffff;
  }
}
</style>

<style lang="scss" scoped>

.scroll {
  height: 100%;
  padding: 10px;
}
</style>