关于前端:定制iview选择器原创全选按钮Csearch

本组件依赖于iview的select，能够在全局装置了Iview的我的项目或者部分引入了Select的页面中自在应用。

目录

• 成果展现
• 性能形容
• 构造代码
• 逻辑代码
• 组件利用
• 事件钩子
• github

成果展现

从左到右别离是：未选状态、选中一个状态、全选状态

性能形容

• 下拉框分为三块：已选列表；全选/勾销全选按钮；未选列表；
• 入选中未选列表的某项，该项主动从未选列表pop去已选列表；
• 入选中已选列表的某项，该项主动从已选列表pop去未选列表；
• 反对关键字搜寻，输入框显示已选数目；

构造代码

<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
              ? "全选"
              : "勾销全选"
          }}
        </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: [], // 未选数组
      selectedList: [], // 已选数组
      s_arr: [], // v-model绑定选项数组
      add_tag: true, // 新增选项标记
      allList: [], // 全选v-model绑定选项数组
      init_list: [] // 全选已选数组
    }
}

• 依据s_arr长度是否为总长度确定是全选还是勾销全选

逻辑代码

// 全选/勾销全选
selectAllFun (isAll) {
  const self = this
  setTimeout(() => {
    self.s_arr = []
    if (isAll) { // 全选
      self.selectedList = []
      self.init_list.forEach(item => {
        // 采纳这种形式的拷贝，不会只是拷贝了对象的别名（只拷贝别名会导致不冀望的被改变）
        self.selectedList.push(item)
      })
      self.unselList = []
      self.allList.forEach(item => {
        self.s_arr.push(item)
      })
    } else { // 勾销全选
      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)
  }
},
// 返回选项列表解决
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)
  })
},
// 拿到的选项解决
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保留的仅是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：解决全选和勾销全选事件，参数isAll判断以后解决的是全选还是勾销全选事件
• add_or_del：判断以后是增加选项还是删除选项并对应设置标签add_tag
• selectOption：抉择事件，依据add_tag进行对应的删除和增加的解决
• openChange：下拉框开展收起事件，在收起的时候将拿到的选项组合传给父组件
• allList_setValue：在首次拿到未选数组时，保留到allList和init_list中（定义见data）
• selList_handle：解决初始化时从父组件那拿到的已选项

组件利用

<Csearch 
    placeholder="水果"
    :trans_unselList="FruitGroup_List"
    :trans_selList="res_FruitGroup_List"
    @func="getFruitGroup_List" 
/>

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

components: {
    Csearch
},

• import引入——>组件注册——>应用

• 父——>子传参：

  • placeholder：父组件传递的输出提醒文字
  • trans_unselList：父组件传递的未选列表
  • isdisabled：父组件传递的该选择器禁用状态
  • trans_selList：父组件传递的已选列表

事件钩子

// 拿到抉择的水果
getFruitGroup_List (list) {
  this.sel_FruitGroup_List = list
  ...do something
}

• getFruitGroup_List：拿到抉择的水果

github

残缺代码：https://github.com/littleOneYuan/c_select