Customize iView selector (original) — Select All button csearch

Time:2021-4-20

This component relies on iView’s select, and can be freely used in projects with global installation of iView or pages with local introduction of select.

catalog

Effect display

Customize iView selector (original) -- Select All button csearchCustomize iView selector (original) -- Select All button csearchCustomize iView selector (original) -- Select All button csearch

From left to right: unselected, one selected, all selected

Function description

  • The drop-down box is divided into three parts: selected list, select all / cancel select all button, unselected list, selected list, unselected list;
  • When an item in the unselected list is selected, the item will pop from the unselected list to the selected list automatically;
  • If an item in the selected list is selected, it will automatically pop from the selected list to the unselected list;
  • Keyword search is supported, and the selected number is displayed in the input box;

Structure code

<template>
  <div class="c-search">
    <Select
      v-model="s_arr"
      :disabled="isdisabled"
      :placeholder="placeholder"
      :max-tag-count="0"
      multiple
      filterable
      label-in-value
      @on-select="selectOption"
      @on-open-change="openChange"
    >
      <Option
        v-for="i in selectedList"
        :value="i.value"
        :key="i.value"
        :title="i.label"
        >{{ i.label }}</Option
      >
      <Option
        value="all"
        key="all"
        v-if="trans_unselList.length > 0"
        style="padding: 0px"
      >
        <p
          @click="
            selectAllFun(
              s_arr.length !== unselList.length + selectedList.length
            )
          "
        >
          {{
            s_arr.length !== unselList.length + selectedList.length
              ? " Select all "
              : " Deselect all "
          }}
        </p>
      </Option>
      <Option
        v-for="item in unselList"
        :value="item.value"
        :key="item.value"
        :title="item.label"
        >{{ item.label }}</Option
      >
    </Select>
  </div>
</template>

data () {
    return {
      unselList : [], //  Unselected array
      selectedList : [], //  Selected array
      s_ Arr: [], // V-model binding options array
      add_ tag :  true , //  New option tag
      Alllist: [], // select all V-model binding options array
      init_ list : [] //  Select all selected arrays
    }
}
  • According to s_ Whether the ARR length is the total length determines whether to select all or cancel all

Logic code

//  Select all / Deselect all
selectAllFun (isAll) {
  const self = this
  setTimeout(() => {
    self.s_arr = []
    if  ( isAll ) { //  Select all
      self.selectedList = []
      self.init_list.forEach(item => {
        //Copying in this way will not only copy the alias of the object (only copying the alias will lead to unexpected changes)
        self.selectedList.push(item)
      })
      self.unselList = []
      self.allList.forEach(item => {
        self.s_arr.push(item)
      })
    }Else {// deselect all
      self.selectedList = []
      self.unselList = []
      self.init_list.forEach(item => {
        self.unselList.push(item)
      })
      self.s_arr = []
    }
  }, 0)
},
add_or_del (o) {
  const self = this
  try {
    self.selectedList.forEach(function (item) {
      if (item.value === o.value) {
        self.add_tag = false
        throw new Error('')
      }
    })
  } catch (e) {
    return ''
  }
  self.add_tag = true
  return ''
},
selectOption (o) {
  const self = this
  if (o.value !== 'all') {
    setTimeout(() => {
      self.add_or_del(o)
      if (self.add_tag) {
        try {
          self.unselList.forEach(function (item, index) {
            if (item.value === o.value) {
              self.unselList.splice(index, 1)
              throw new Error('')
            }
          })
        } catch (e) {
          // console.log(e)
        }
        self.selectedList.push(o)
      } else {
        try {
          self.selectedList.forEach(function (item, index) {
            if (item.value === o.value) {
              self.selectedList.splice(index, 1)
              throw new Error('')
            }
          })
        } catch (e) {
          // console.log(e)
        }
        self.unselList.push(o)
      }
    }, 100)
  }
},
openChange (isopen) {
  if (!isopen) {
    var res = this.backList_handle(this.selectedList)
    this.$emit('func', res)
  }
},
//Return to option list processing
backList_handle (list) {
  if (isArray(list)) {
    var res = []
    list.forEach(item => {
      res.push(item.value)
    })
    return res
  }
},
allList_setValue () {
  const self = this
  self.unselList.forEach(temp => {
    self.allList.push(temp.value)
    self.init_list.push(temp)
  })
},
//How to deal with the options you get
selList_handle (trans, unsel) {
  const self = this
  setTimeout(() => {
    if (trans && trans.length > 0) {
      const sel = []
      const un_sel = []
      unsel.forEach(function (item, index) {
        if (item.value && trans.indexOf(item.value) !== -1) {
          sel.push(item)
        } else if (item.value && trans.indexOf(item.value) === -1) {
          un_sel.push(item)
        }
      })
      self.selectedList = sel
      // s_ Arr holds only value
      self.selectedList.forEach(item => {
        self.s_arr.push(item.value)
      })
      self.unselList = un_sel
      const res = this.backList_handle(self.selectedList)
      this.$emit('func', res)
    } else if (trans && trans.length === 0) {
      self.selectedList = []
      self.unselList = []
      self.init_list.forEach(item => {
        self.unselList.push(item)
      })
      self.s_arr = []
      const res = this.backList_handle(self.selectedList)
      this.$emit('func', res)
    }
  }, 0)
}
  • selectAllFun:Process select all and cancel select all events. Parameter isall determines whether the current process is select all or cancel select all events
  • add_or_del:Judge whether to add options or delete options, and set the label add correspondingly_ tag
  • selectOption:Select the event, according to add_ Tag to delete and add
  • openChange:The drop-down box expands the collapse event, and passes the combination of options to the parent component
  • allList_setValue:When you get the unselected array for the first time, save it to alllist and init_ List (see data for definition)
  • selList_handle:Handle the selected items from the parent component during initialization

Component application

<Csearch 
    Placeholder = "fruit"
    :trans_unselList="FruitGroup_List"
    :trans_selList="res_FruitGroup_List"
    @func="getFruitGroup_List" 
/>

import Csearch from '../c-search/index.vue'

components: {
    Csearch
},
  • Import import > component registration > use
  • Father > son

    • placeholder:Input prompt text passed by parent component
    • trans_unselList:Unselected list passed by parent component
    • isdisabled:The selector passed by the parent component is disabled
    • trans_selList:The selected list passed by the parent component

event hook

//Get the fruit of your choice
getFruitGroup_List (list) {
  this.sel_FruitGroup_List = list
  ...do something
}
  • getFruitGroup_ List: get the selected fruit

github

Complete codehttps://github.com/littleOneYuan/c_select

Recommended Today

Envoy announced alpha version of native support for windows

Author: sunjay Bhatia Since 2016, porting envoy to the windows platform has been an important part of the projectOne of the goalsToday, we are excited to announce the alpha version of envoy’s windows native support. The contributor community has been working hard to bring the rich features of envoy to windows, which is another step […]