<el-select v-model="user.name" placeholder="請(qǐng)選擇">
    <el-option v-for="item in nameList" :key="item" :label="item" :value="item">
    </el-option>
  </el-select>

首先需要使用到 el-select和 el-option， el-select就是下拉框，所以需要使用 v-model雙向綁定數(shù)據(jù)。而 el-option就是下拉框的選項(xiàng)。

import { reactive, toRefs } from "vue";

const state = reactive({
  nameList: ["clz", "czh", "ccc"],
  user: {
    name: "",
  },
});

const { nameList, user } = toRefs(state);

全選互斥

需求：下拉框選項(xiàng)中有全選以及其他項(xiàng)，需要實(shí)現(xiàn)點(diǎn)擊全選后不能選擇其他項(xiàng)，選中了其他項(xiàng)同樣不能選擇全選。

下拉框多選

先來(lái)簡(jiǎn)單了解下下拉框的多選。

理論上來(lái)說(shuō)，是只需要給 el-select添加上 multiple就能實(shí)現(xiàn)多選，但是效果不太好。選中的會(huì)擠在一起。

這個(gè)時(shí)候，我們可以添加 collapse-tags屬性，這樣子，這樣子就只會(huì)顯示一個(gè)選項(xiàng)，沒(méi)顯示的以數(shù)量的形式在后面。

再添加 collapse-tags-tooltip屬性，還能實(shí)現(xiàn)，懸浮在 +X上方時(shí)，顯示全部選中的選項(xiàng)。

代碼：

<el-select
  v-model="form.ages"
  placeholder="請(qǐng)選擇"
  multiple
  collapse-tags
  collapse-tags-tooltip
>
  <el-option
    v-for="item in ageList"
    :key="item"
    :label="item"
    :value="item"
  ></el-option>
</el-select>

import { reactive, toRefs } from "vue";

const state = reactive({
  ageList: ["全部", 19, 20, 21, 22],
  form: {
    ages: [],
  },
});

const { ageList, form } = toRefs(state);

全選互斥的實(shí)現(xiàn)

這個(gè)主要就是依靠 disabled屬性來(lái)實(shí)現(xiàn)，只不過(guò)屬性值變成一個(gè)返回 boolean值的函數(shù)了。

  <el-select
    v-model="form.ages"
    placeholder="請(qǐng)選擇"
    multiple
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="item in ageList"
      :key="item"
      :label="item"
      :value="item"
      :disabled="checkAge"
    ></el-option>
  </el-select>

const checkAge = () => {
  return true;
};

可以看到，當(dāng)綁定的 checkAge返回 true的時(shí)候，全部選項(xiàng)都不能選了。

明白原理后，我們便只需要理清思路就行了。

首先，我們綁定的 checkAge應(yīng)該要把選中項(xiàng)( item)作為參數(shù)傳給 checkAge，這樣子才能得到選中的項(xiàng)。

接著，就是思路了。我們禁選的情況就兩種：

選擇了全部，此時(shí)禁選非全部的選項(xiàng)
選擇了非全部的選項(xiàng)，此時(shí)禁選全部

也就是說(shuō)，只有這兩個(gè)情況返回 true，其他時(shí)候返回 false

const checkAge = (item) => {
  if (form.value.ages.includes("全部") && item !== "全部") {
    // 選擇了`全部`，此時(shí)禁選`非全部的選項(xiàng)`
    return true;
  } else if (!form.value.ages.includes("全部") && item === "全部") {
    // 選擇了`非全部的選項(xiàng)`，此時(shí)`禁選全部`
    return true;
  }

  return false;
};

是不是很簡(jiǎn)單，但是還沒(méi)完，上面那樣子還會(huì)有小問(wèn)題。

我們什么都沒(méi)有選擇的時(shí)候，全部選項(xiàng)不能選。這是因?yàn)樯厦孢x擇非全部選項(xiàng)時(shí)的判斷，寫成了沒(méi)有選擇全部的時(shí)候，所以一開始確實(shí)沒(méi)有選擇全部，那么就不能選擇了。所以在一開始應(yīng)該判斷有沒(méi)有已經(jīng)選中的，如果沒(méi)有，就返回`` false`

const checkAge = (item) => {
  if (form.value.ages.length === 0) {
    return false;
  }
  if (form.value.ages.includes("全部") && item !== "全部") {
    return true;
  } else if (!form.value.ages.includes("全部") && item === "全部") {
    return true;
  }

  return false;
};

多個(gè)下拉框互斥

多個(gè)下拉框不能同時(shí)選擇同樣的選項(xiàng)。

  <el-select v-model="hobbys.hobby1" placeholder="請(qǐng)選擇愛好">
    <el-option
      v-for="item in hobbyList"
      :key="item"
      :label="item"
      :value="item"
      :disabled="checkHobby(item)"
    ></el-option>
  </el-select>

有三個(gè)上面的下拉框，依次是 hobby1， hobby2， hobby3

import { reactive, toRefs } from "vue";

const state = reactive({
  hobbyList: ["聽歌", "動(dòng)漫", "前端"],
  hobbys: {
    hobby1: "",
    hobby2: "",
    hobby3: "",
  },
});

const { hobbyList, hobbys } = toRefs(state);

老樣子，通過(guò)給 disabled屬性綁定方法，把選中的值傳過(guò)去。

多個(gè)下拉框互斥的實(shí)現(xiàn)就比較簡(jiǎn)單了，只需要遍歷選中的值，是不是等于要選的值，等于的話就禁止選擇(return true)。如果能遍歷完，即該選項(xiàng)沒(méi)有被其他下拉框選中過(guò)，那么就能選擇( return false)。

const checkHobby = (item) => {
  for (const hobbyKey in hobbys.value) {
    // 如果已經(jīng)有選中過(guò)該選項(xiàng)的下拉框，則禁止再次選擇
    if (item === hobbys.value[hobbyKey]) {
      return true;
    }
  }

  return false;
};

一般全選的實(shí)現(xiàn)

什么是一般全選？其實(shí)只是為了區(qū)分上面的全選互斥。就是常見的點(diǎn)擊全選復(fù)選框，就會(huì)選中全部選項(xiàng)。

<el-select
  v-model="form.ages"
  placeholder="請(qǐng)選擇"
  multiple
  collapse-tags
  collapse-tags-tooltip
>
  <el-checkbox v-model="checked" />全選
  <el-option
    v-for="item in ageList"
    :key="item"
    :label="item"
    :value="item"
  ></el-option>
</el-select>

import { reactive, toRefs } from "vue";

const state = reactive({
  ageList: [19, 20, 21, 22],
  form: {
    ages: [],
  },
  checked: false,
});

const { ageList, form, checked } = toRefs(state);

這個(gè)時(shí)候，全選和下面的選項(xiàng)是互不關(guān)聯(lián)的，所以我們可以通過(guò)添加 change事件，但復(fù)選框狀態(tài)變化時(shí)，去修改下面的選項(xiàng)的選中與否。

<el-checkbox v-model="checked" @change="handleCheckAllChange" />全選

const handleCheckAllChange = () => {
  if (checked.value) {
    form.value.ages = ageList.value;
  } else {
    form.value.ages = [];
  }
};

到這一步的時(shí)候，我們就能夠做到點(diǎn)擊全選復(fù)選框，能同時(shí)修改下面選項(xiàng)的選中狀態(tài)了，但是，還不能實(shí)現(xiàn)選中下面全部選項(xiàng)時(shí)，同時(shí)修改全選復(fù)選框?yàn)檫x中狀態(tài)。

可以通過(guò)添加偵聽器，偵聽選中結(jié)果，如果發(fā)生變化，就會(huì)觸發(fā)偵聽器，并根據(jù)選中結(jié)果的長(zhǎng)度和選項(xiàng)總長(zhǎng)度對(duì)比。

watch(
  () => form.value.ages,
  (newValue) => {
    checked.value = newValue.length === ageList.value.length;
  }
);

如果想要加個(gè)中間態(tài)的話，就需要用到 element-plus復(fù)選框的 indeterminate屬性。

這時(shí)候，復(fù)選框的狀態(tài)不再是只依靠 checked了，而是 indeterminate和 v-model同時(shí)作用。

indeterminate為 false，v-model為 true時(shí)，狀態(tài)為 √
indeterminate為 false，v-model為 false時(shí)，狀態(tài)為空
indeterminate為 true時(shí)，狀態(tài)為 -

所以要實(shí)現(xiàn)中間態(tài)，只需要當(dāng)選中的選項(xiàng)的個(gè)數(shù)比總選項(xiàng)的個(gè)數(shù)少，且選中的選項(xiàng)的個(gè)數(shù)不為0時(shí), indeterminate的值為 true即可。

<el-checkbox
  v-model="checked"
  :indeterminate="
    form.ages.length < ageList.length && form.ages.length !== 0
  "
  @change="handleCheckAllChange"
/>全選

到此這篇關(guān)于element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼的文章就介紹到這了,更多相關(guān)element-plus 下拉框全選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: