element-plus 下拉框實現全選的示例代碼

Posted on by

前言

實習確實能學到不少東西，但是學到的東西果然還是需要沉淀下來，不然後面立馬又忘記瞭。

下拉框的簡單使用

使用方法還是比較簡單的

<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雙向綁定數據。而 el-option就是下拉框的選項。

import { reactive, toRefs } from "vue";

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

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

全選互斥

需求：下拉框選項中有全選以及其他項，需要實現點擊全選後不能選擇其他項，選中瞭其他項同樣不能選擇全選。

下拉框多選

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

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

這個時候，我們可以添加 collapse-tags屬性，這樣子，這樣子就隻會顯示一個選項，沒顯示的以數量的形式在後面。

再添加 collapse-tags-tooltip屬性，還能實現，懸浮在 +X上方時，顯示全部選中的選項。

代碼：

<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);

全選互斥的實現

這個主要就是依靠 disabled屬性來實現，隻不過屬性值變成一個返回 boolean值的函數瞭。

  <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;
};

可以看到，當綁定的 checkAge返回 true的時候，全部選項都不能選瞭。

明白原理後，我們便隻需要理清思路就行瞭。

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

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

  • 選擇瞭全部，此時禁選非全部的選項
  • 選擇瞭非全部的選項，此時禁選全部

也就是說，隻有這兩個情況返回 true，其他時候返回 false

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

  return false;
};

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

我們什麼都沒有選擇的時候，全部選項不能選。這是因為上面選擇非全部選項時的判斷，寫成瞭沒有選擇全部的時候，所以一開始確實沒有選擇全部，那麼就不能選擇瞭。所以在一開始應該判斷有沒有已經選中的，如果沒有，就返回“ 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;
};

多個下拉框互斥

多個下拉框不能同時選擇同樣的選項。

  <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屬性綁定方法，把選中的值傳過去。

多個下拉框互斥的實現就比較簡單瞭，隻需要遍歷選中的值，是不是等於要選的值，等於的話就禁止選擇(return true)。如果能遍歷完，即該選項沒有被其他下拉框選中過，那麼就能選擇( return false)。

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

  return false;
};

一般全選的實現

什麼是一般全選？其實隻是為瞭區分上面的全選互斥。就是常見的點擊全選復選框，就會選中全部選項。

<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);

這個時候，全選和下面的選項是互不關聯的，所以我們可以通過添加 change事件，但復選框狀態變化時，去修改下面的選項的選中與否。

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

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

到這一步的時候，我們就能夠做到點擊全選復選框，能同時修改下面選項的選中狀態瞭，但是，還不能實現選中下面全部選項時，同時修改全選復選框為選中狀態。

可以通過添加偵聽器，偵聽選中結果，如果發生變化，就會觸發偵聽器，並根據選中結果的長度和選項總長度對比。

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

如果想要加個中間態的話，就需要用到 element-plus復選框的 indeterminate屬性。

這時候，復選框的狀態不再是隻依靠 checked瞭，而是 indeterminate和 v-model同時作用。

  • indeterminate為 false，v-model為 true時，狀態為 √
  • indeterminate為 false，v-model為 false時，狀態為空
  • indeterminate為 true時，狀態為 -

所以要實現中間態，隻需要當選中的選項的個數比總選項的個數少，且選中的選項的個數不為0時, indeterminate的值為 true即可。

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

到此這篇關於element-plus 下拉框實現全選的示例代碼的文章就介紹到這瞭,更多相關element-plus 下拉框全選內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：