关于前端:定制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