【组件封装】改造 Element-UI 多选框组件 (el-checkbox)

code.jpg

el-checkbox多选框组件

element-ui官网的多选框组件，是采用简单数组进行配置的，显示的lable值与勾选后的值是同一个

el-checkbox.jpg

实际业务场景

在实际业务开发中，我们更多遇到是如下数组对象的格式。

我们需要额外将数组进行label、value的拆分才能使用 el-checkbox 。

如果要实现勾选、全选、默认赋值的场景，将需要更加复杂的代码处理。

[

  { label: '小红', value: '1' },

  { label: '小明', value: '2' },

  { label: '小芳', value: '3' }

]

组件设计(简易版本)

调用效果及代码

show1.png

改造后的组件（test.vue）

组件设计（完整版）

组件简介

p-el-checkbox.png

调用效果及代码

show2.png

组件源码（p-el-checkbox.vue）

仓库源码

改造el-checkbox