腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼

更新時(shí)間：2022年05月25日 17:15:19 作者：赤藍(lán)紫

本文主要介紹了element-plus 下拉框?qū)崿F(xiàn)全選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

實(shí)習(xí)確實(shí)能學(xué)到不少東西，但是學(xué)到的東西果然還是需要沉淀下來，不然后面立馬又忘記了。

下拉框的簡單使用

使用方法還是比較簡單的

<el-select v-model="user.name" placeholder="請選擇">
    <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)同樣不能選擇全選。

下拉框多選

先來簡單了解下下拉框的多選。

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

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

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

代碼：

<el-select
  v-model="form.ages"
  placeholder="請選擇"
  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)

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

  <el-select
    v-model="form.ages"
    placeholder="請選擇"
    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í)禁選全部

也就是說，只有這兩個情況返回 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;
};

是不是很簡單，但是還沒完，上面那樣子還會有小問題。

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

多個下拉框互斥

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

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

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

import { reactive, toRefs } from "vue";

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

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

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

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

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

  return false;
};

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

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

<el-select
  v-model="form.ages"
  placeholder="請選擇"
  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);

這個時(shí)候，全選和下面的選項(xiàng)是互不關(guān)聯(lián)的，所以我們可以通過添加 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)。

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

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

如果想要加個中間態(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)的個數(shù)比總選項(xiàng)的個數(shù)少，且選中的選項(xiàng)的個數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: