ElSelect 全选

ElSelect 实现全选功能。当下拉选项为接口获取的时候，编辑时要监听下拉选项，当返回下拉选项和下拉值做比较，设置相应的全选状态。

<script setup>
import { ref, watch } from 'vue'
import { getOption } from '@/api'

const checkAll = ref(false)
const indeterminate = ref(false)
const arr3 = ref([])

const handleCheckAll = val => {
  indeterminate.value = false
  if (val) {
    form.targetDataTableColumns = arr3.value.map(_ => _)
  } else {
    form.targetDataTableColumns = []
  }
}

const getSelect = () => {
  getOption().then(res => {
    arr3.value = res.data
  })
}
getSelect()

// 监听勾选下拉对应状态变化
watch(
  () => form.targetDataTableColumns,
  val => {
    if (val.length === 0) {
      checkAll.value = false
      indeterminate.value = false
    } else if (val.length === arr3.value.length) {
      checkAll.value = true
      indeterminate.value = false
    } else {
      indeterminate.value = true
    }
  }
)

// 因为下拉是通过接口获取的 所以要监听 当编辑的时候 下拉数据返回比较是否全选
watch(
  () => arr3.value,
  val => {
    if (form.targetDataTableColumns.length === arr3.value.length) {
      checkAll.value = true
      indeterminate.value = false
    }
  }
)

</script>
<template>
  <el-select
      v-model="form.targetDataTableColumns"
      filterable
      clearable
      multiple
      placeholder="请输入选择"
    >
      <template #header>
        <el-checkbox
          v-model="checkAll"
          :indeterminate="indeterminate"
          @change="handleCheckAll"
        >
          全选
        </el-checkbox>
      </template>
      <el-option
        v-for="item in arr3"
        :label="item"
        :value="item"
        :key="item"
      ></el-option>
    </el-select>
<template>