效果圖
依賴說明
使用element-ui的el-select
和el-option
進行二次封裝,故依賴element-ui
功能介紹
多選框支持選擇全部
- 新增【全部】選項,該選項文字可通過配置修改
組件代碼
<!--
支持全選的多選框
-->
<template>
<el-select v-model="selected"
:collapse-tags="collapseTags"
:multiple="multiple"
:popper-append-to-body="false"
class="all-select-box">
<el-option v-if="multiple && data.length"
id="select-all"
ref="all"
:class="{'selected': isSelectedAll,'divide-line': divideAll}"
:label="allLabel"
disabled
value="@all"
@click.stop.native="isSelectedAll = !isSelectedAll">
</el-option>
<el-option v-for="item in data"
:key="item[label] + item[_value]"
:label="item[label]"
:value="item[_value]">
</el-option>
</el-select>
</template>
<script>
export default {
name: 'selectAll',
model: {
prop: 'value',
event: 'v-model'
},
props: {
// 全選框綁定值
value: {
type: Array,
default: []
},
// 全選框數據
data: {
type: Array,
default: []
},
// 全選按鈕標題
allLabel: {
type: String,
default: '全部'
},
// 是否用線將全選與其它選項分割
divideAll: {
type: Boolean,
default: false
},
// 全選框對應配置
option: {
type: Object,
default: () => ({
// 設置label對應字段
label: 'label',
// 設置value對應字段
value: 'value'
})
},
// el-select原生屬性
multiple: {
type: Boolean,
default: true
},
collapseTags: {
type: Boolean,
default: true
}
},
computed: {
// 當前的選中項列表
selected: {
get() {
return this.value
},
set(v) {
this.$emit('v-model', v)
}
},
// 當前是否全選
isSelectedAll: {
get() {
return this.data.every(i => this.selected.includes(i[this._value]))
},
set(v) {
this.$emit('v-model', v ? this.data.map(i => i[this._value]) : [])
}
},
label() {
return this.option.label
},
_value() {
return this.option.value
},
},
}
</script>
<style scoped>
#select-all {
cursor: pointer;
}
.divide-line {
border-bottom: 1px solid rgba(123, 123, 123, .1);
}
#select-all:not(.selected) {
color: #606266;
}
/deep/ .el-select-dropdown__item.hover {
background-color: transparent !important;
}
#select-all:hover, /deep/ .el-select-dropdown__item:hover {
background-color: #f5f7fa !important;
}
</style>
樣例
<select-all v-model="selected"
:data="listData"
:option="{label: 'label', value: 'value'}">
</select-all>
參數說明
參數 | 說明 | 默認值 |
---|---|---|
data | 選擇框的數據列表,包括可選項的名稱及選擇的值等 | [] |
v-model/value | 選中的值 | [] |
all-label | 全選選項顯示的文字 | '全部' |
divide-all | 是否用線將全選選項與其它選項分割 | false |
option | 選擇框的配置 - label,設置顯示值對應的字段 - value,設置選中綁定值對應的字段 |
|
multiple | el-select屬性,是否多選 | true |
collapse-tags | el-select屬性,多選時是否折疊顯示選中項 | true |