国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

el-select 下拉框多選實現(xiàn)全選

Miyang / 671人閱讀

摘要：還是看代碼吧。。。部分請選擇全選全選部分一一二二三三四四五五全選全選全選全選全選全選看看效果圖方法二直接添加一個全選復(fù)選框，實現(xiàn)的功能跟方法一是一樣的部分請選擇全選部分一一二二三三四四五五效果圖

在寫一個功能時發(fā)現(xiàn)el-select支持多選，但是竟然不支持全選，好無語哦，那就自己實現(xiàn)一下吧~有兩種方法，第二種感覺簡單些

方法一：下拉項增加一個【全選】，然后應(yīng)該有以下幾種情況：

下拉選項全都勾選時，【全選】自動勾選；

下拉選項部分勾選時，點擊【全選】后，所有下拉項全部勾選；

下拉選項全都未勾選時，點擊【全選】后，所有下拉選項不勾選；

下拉選項和【全選】都選上的時候，不勾選任意下拉選項，【全選】按鈕就不勾選了；

上面就是我要實現(xiàn)的功能，我好啰嗦。。。還是看代碼吧。。。

html部分：

js部分：

export default {
  data() {
    return {
      selectedArray: [],
      options: [
        { name: "一一", label: "one" },
        { name: "二二", label: "tow" },
        { name: "三三", label: "three" },
        { name: "四四", label: "four" },
        { name: "五五", label: "five" }
      ]
    }
  },
  methods: {
    selectAll() {
      if (this.selectedArray.length < this.options.length) {
        this.selectedArray = []
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
        this.selectedArray.unshift("全選")
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (!val.includes("全選") && val.length === this.options.length) {
        this.selectedArray.unshift("全選")
      } else if (val.includes("全選") && (val.length - 1) < this.options.length) {
        this.selectedArray = this.selectedArray.filter((item) => {
          return item !== "全選"
        })
      }
    },
    removeTag(val) {
      if (val === "全選") {
        this.selectedArray = []
      }
    }
  }
}

看看效果圖：

方法二：直接添加一個【全選】復(fù)選框，實現(xiàn)的功能跟方法一是一樣的
html部分：

js部分：

export default {
  data() {
    return {
      checked: false,
      selectedArray: [],
      options: [
        { name: "一一", label: "one" },
        { name: "二二", label: "tow" },
        { name: "三三", label: "three" },
        { name: "四四", label: "four" },
        { name: "五五", label: "five" }
      ]
    }
  },
  methods: {
    selectAll() {
      this.selectedArray = []
      if (this.checked) {
        this.options.map((item) => {
          this.selectedArray.push(item.name)
        })
      } else {
        this.selectedArray = []
      }
    },
    changeSelect(val) {
      if (val.length === this.options.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    }
  }
}

css：

.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
  }

效果圖：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106292.html

相關(guān)文章

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    wenshi11019 評論0 收藏0

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

    Yuqi 評論0 收藏0

  • UDesign 組件更新 | 近期優(yōu)化迭代

    摘要：一日期時間相關(guān)組件改版月初對日期時間相關(guān)組件交互上進(jìn)行了一波大更新，主要是為了減少用戶的操作成本，減少展示占用面積。單日期范圍選擇器中選擇日期后，自動跳轉(zhuǎn)至下一個框進(jìn)行選擇，都選擇完成后自動確認(rèn)。單日期范圍選擇器中使用雙面板展示。一、日期時間相關(guān)組件改版（DatePicker、TimePicker）6 月初對日期時間相關(guān)組件DatePicker、TimePicker交互上進(jìn)行了一波大更新，主...

    ernest.wang 評論0 收藏0

  • el-select數(shù)據(jù)過多懶加載(loadmore)

    摘要：數(shù)據(jù)過多處理方式在日常項目中組件的使用頻率是非常之高的當(dāng)數(shù)據(jù)過多時渲染時間非常長這里提供幾個處理方式遠(yuǎn)程搜索組件提供了遠(yuǎn)程搜索方式也就是按照你輸入的結(jié)果匹配選項官網(wǎng)提供了參考示例這里不加贅述下拉懶加載下拉懶加載當(dāng)滾動到底部時你再去請求一 el-select數(shù)據(jù)過多處理方式 在日常項目中el-select組件的使用頻率是非常之高的. 當(dāng)數(shù)據(jù)過多時渲染時間非常長, 這里提供幾個處理方式. ...

    elliott_hu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<