code.jpg
el-checkbox多選框組件
element-ui官網(wǎng)的多選框組件盒揉，是采用簡(jiǎn)單數(shù)組進(jìn)行配置的，顯示的lable值與勾選后的值是同一個(gè)
el-checkbox.jpg
實(shí)際業(yè)務(wù)場(chǎng)景
在實(shí)際業(yè)務(wù)開(kāi)發(fā)中兑徘，我們更多遇到是如下數(shù)組對(duì)象的格式刚盈。
我們需要額外將數(shù)組進(jìn)行l(wèi)abel、value的拆分才能使用 el-checkbox 挂脑。
如果要實(shí)現(xiàn)勾選藕漱、全選、默認(rèn)賦值的場(chǎng)景崭闲，將需要更加復(fù)雜的代碼處理肋联。
[
{ label: '小紅', value: '1' },
{ label: '小明', value: '2' },
{ label: '小芳', value: '3' }
]
組件設(shè)計(jì)(簡(jiǎn)易版本)
調(diào)用效果及代碼
show1.png
<!--
* @Date: 2020-12-09 17:52:54
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:22:01
* @LastEditors: surewinT 840325271@qq.com
* @Description: 調(diào)用頁(yè)面
-->
<template>
<div class="">
<Test :checkboxList="checkboxList" v-model="result" />
</div>
</template>
<script>
import Test from "./test.vue";
export default {
components: {
Test,
},
props: [],
data() {
return {
checkboxList: [
{ label: "小紅", value: "1" },
{ label: "小明", value: "2" },
{ label: "小芳", value: "3" },
],
result: [],
};
},
mounted() {},
watch: {
result() {
console.log("變化了：", this.result);
},
},
methods: {},
};
</script>
<style lang='scss' scoped>
</style>
改造后的組件（test.vue）
<!--
* @Date: 2022-05-09 11:52:02
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:22:10
* @LastEditors: surewinT 840325271@qq.com
* @Description: 改造后的組件
-->
<template>
<div class="">
<el-checkbox-group v-model="labelResult">
<el-checkbox v-for="(item, index) in labelList" :key="index" :label="item"> </el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
components: {},
props: {
checkboxList: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
labelResult: [],
labelList: [],
labelMap: {},
};
},
mounted() {
this.loadData();
},
watch: {},
methods: {
// 初始化數(shù)據(jù)
loadData() {
this.checkboxList.forEach((res) => {
this.labelList.push(res["label"]);
this.labelMap[res["label"]] = res["value"];
});
},
},
};
</script>
<style lang='scss' scoped>
</style>
組件設(shè)計(jì)（完整版）
組件簡(jiǎn)介
p-el-checkbox.png
調(diào)用效果及代碼
show2.png
<!--
* @Date: 2020-12-09 17:52:54
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:49:13
* @LastEditors: surewinT 840325271@qq.com
* @Description: 調(diào)用頁(yè)面
-->
<template>
<div class="">
<p-el-checkbox
v-model="result"
resultType="Array"
label="name"
prop="id"
:defaultCheck="defaultCheck"
:checkboxList="checkboxList"
/>
</div>
</template>
<script>
import Pelcheckbox from "./p-el-checkbox.vue";
export default {
components: {
"p-el-checkbox": Pelcheckbox,
},
props: [],
data() {
return {
defaultCheck: ["1", "3"],
checkboxList: [
{ name: "小紅", id: "1" },
{ name: "小明", id: "2" },
{ name: "小芳", id: "3" },
],
result: {},
};
},
mounted() {},
watch: {
result: function () {
console.log("變化了：", this.result);
},
},
methods: {},
};
</script>
<style lang='scss' scoped>
</style>
組件源碼（p-el-checkbox.vue）
<!--
* @Author: surewinT 840325271@qq.com
* @LastEditTime: 2022-05-09 14:57:09
* @LastEditors: surewinT 840325271@qq.com
* @Description: 改造 Element-UI 多選框組件 (el-checkbox)
-->
<template>
<div :class="customClass">
<el-checkbox
v-if="showCheckAll"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>
全選
</el-checkbox>
<el-checkbox-group v-model="labelResult" :class="inline ? '' : 'al_checkbox'">
<span v-for="(item, index) in labelList" :key="index">
<el-checkbox :label="item" :class="labelClass" @change="handleCheckChange" v-if="judgeHidden(item)">
<span>
<slot
name="label"
:index="index"
:label="item"
:checkboxList="checkboxList"
:disabled="checkboxMap[item] && checkboxMap[item].disabled"
:data="checkboxList[index] ? JSON.parse(JSON.stringify(checkboxList[index])) : {}"
>
<span> {{ item }} </span>
</slot>
</span>
</el-checkbox>
</span>
</el-checkbox-group>
</div>
</template>
<script>
/**
* @description:props說(shuō)明
* @param {Boolean} showCheckAll -是否顯示全選按鈕
* @param {Boolean} inline -是否是行內(nèi)表單
* @param {Array<Object>} checkboxList -多選框組件的數(shù)據(jù)配置
* @param {String} label -label對(duì)應(yīng)的字段
* @param {String} prop -value對(duì)應(yīng)的字段
* @param {Array} defaultCheck -默認(rèn)勾選的項(xiàng)
* @param {String} resultType -綁定值的類型(支持對(duì)象、數(shù)組兩種格式)
* @param {String} labelClass -單個(gè)選項(xiàng)綁定類名刁俭，可用于自定義樣式
* @param {String} customClass -多選框的綁定類型橄仍，可用于自定義樣式
* @param {Array} checkboxHidden -隱藏的表單項(xiàng)，元素對(duì)應(yīng)checkboxList中prop的值
*/
export default {
name: "p-el-checkbox",
props: {
showCheckAll: {
type: Boolean,
default: true,
},
inline: {
type: Boolean,
default: true,
},
checkboxList: {
type: Array,
default: () => {
return [];
},
},
label: {
type: String,
default: "label",
},
prop: {
type: String,
default: "value",
},
defaultCheck: {
type: Array,
default: () => {
return [];
},
},
resultType: {
type: String,
default: "Array", // 可選：Array 牍戚、Object
},
labelClass: {
type: String,
default: "",
},
customClass: {
type: String,
default: "",
},
checkboxHidden: {
type: Array,
default: function () {
return [];
},
},
},
data() {
return {
labelList: [],
labelResult: [],
labelMap: {}, // label與res的映射(res指checkboxList每一項(xiàng)元素)
isIndeterminate: false,
checkAll: false,
currentLabel: null,
currentValue: null,
};
},
mounted() {
this.loadData();
},
computed: {
arrayRusult: function () {
let result = [];
if (this.resultType == "Array") {
this.labelResult.forEach((res) => {
result.push(this.labelMap[res]);
});
}
return result;
},
objectRusult: function () {
let obj = {};
if (this.resultType == "Object") {
for (let item in this.labelMap) {
if (this.checkboxHidden.indexOf(this.labelMap[item]) != -1) {
continue;
}
if (this.labelResult.indexOf(item) == -1) {
obj[this.labelMap[item]] = false;
} else {
obj[this.labelMap[item]] = true;
}
}
}
return obj;
},
// 名字映射
checkboxMap() {
let obj = {};
for (let res of this.checkboxList) {
obj[res[this.label]] = res;
}
return obj;
},
},
watch: {
checkboxList() {
this.loadData();
},
labelResult() {
this.isIndeterminate = true;
this.checkAll = false;
if (this.labelResult.length == 0) {
this.isIndeterminate = false;
this.checkAll = false;
} else if (this.labelResult.length == this.labelList.length - this.checkboxHidden.length) {
this.isIndeterminate = false;
this.checkAll = true;
}
// 返回?cái)?shù)組結(jié)果
if (this.resultType == "Array") {
this.$emit("input", this.arrayRusult);
}
// 返回對(duì)象結(jié)果
if (this.resultType == "Object") {
this.$emit("input", this.objectRusult);
}
},
defaultCheck() {
this.labelResult = [];
this.checkboxList.forEach((res) => {
if (this.defaultCheck.indexOf(res[this.prop]) != -1) {
this.labelResult.push(res[this.label]);
}
});
},
},
methods: {
// 初始化數(shù)據(jù)
loadData() {
this.checkboxList.forEach((res) => {
this.labelList.push(res[this.label]);
this.labelMap[res[this.label]] = res[this.prop];
if (this.defaultCheck.indexOf(res[this.prop]) != -1) {
this.labelResult.push(res[this.label]);
}
});
},
// 全選按鈕
handleCheckAllChange(val) {
this.isIndeterminate = false;
if (val) {
this.isIndeterminate = false;
this.checkAll = true;
this.labelResult = JSON.parse(JSON.stringify(this.labelList));
// 過(guò)濾隱藏選項(xiàng)
this.labelResult = this.labelResult.filter((res) => {
let exist = this.checkboxHidden.indexOf(this.labelMap[res]);
return exist == -1;
});
} else {
this.checkAll = false;
this.labelResult = [];
}
},
// 單擊多選框
handleCheckChange(val, e) {
this.currentLabel = this.labelMap[e.target.value];
this.currentValue = val;
// 返回?cái)?shù)組結(jié)果：（勾選結(jié)果侮繁，點(diǎn)擊的prop，點(diǎn)擊的prop是否勾選）
if (this.resultType == "Array") {
this.$emit("change", this.arrayRusult, this.currentLabel, this.currentValue);
}
// 返回對(duì)象結(jié)果：（勾選結(jié)果如孝，點(diǎn)擊的prop宪哩，點(diǎn)擊的prop是否勾選）
if (this.resultType == "Object") {
this.$emit("change", this.objectRusult, this.currentLabel, this.currentValue);
}
},
// 隱藏判斷
judgeHidden(name) {
let show = this.checkboxHidden.indexOf(this.labelMap[name]) == -1 ? true : false;
return show;
},
},
};
</script>
<style lang="scss" scoped>
.el-checkbox {
display: inline-block;
padding-right: 10px;
}
.al_checkbox {
.el-checkbox {
display: block;
margin-right: 0;
}
}
// 滾動(dòng)條樣式修改
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(155, 155, 155, 0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(155, 155, 155, 0.1);
}
</style>
