element checkbox不支援繫結物件
關於解決elementUI元件el-checkbox-group無法繫結物件陣列的問題
1.問題背景
2.解決方案
1.把 element 原始碼克隆到本地
2.安裝依賴
3.查詢檔案
4.替換程式碼
5.重新打包
6.GitHub下載
1.問題背景
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="複選框 A"></el-checkbox>
<el-checkbox label="複選框 B"></el-checkbox>
<el-checkbox label="複選框 C"></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: ['複選框 A']
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
element UI 官方文件中，el-checkbox-group元件繫結值都是一維字串陣列（如上圖所示），但在實際專案開發中，往往需要繫結一維物件陣列來滿足專案需求。以下圖為例，在某績效專案中，對模板配置動態績效指標時，績效指標的繫結值需要繫結一維物件陣列，官方el-checkbox-group已不能滿足專案需求。
2.解決方案
1.把 element 原始碼克隆到本地
git clone https://github.com/ElemeFE/element.git
或者下 zip 包 https://github.com/ElemeFE/element
2.安裝依賴
npm install 或 cnpm install
3.查詢檔案
檔案目錄：packages\checkbox\src下的 checkbox-button.vue 和 checkbox.vue 檔案
4.替換程式碼
將上圖紅框中的程式碼替換為以下程式碼：
return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1;
1
5.重新打包
npm run dist，將生成的 lib 資料夾替換專案裡 node-module 的 element-ui 資料夾中的 lib 資料夾。
6.GitHub下載
前往GitHub下載程式碼優化之後的 [email protected] 包，將下載下來的包替換專案裡 node-module 下的 element-ui 資料夾或者將下載下來的包檔案裡的 lib 資料夾替換專案裡 node-module 下的 element-ui 資料夾中的 lib 資料夾即可。
下載地址：https://github.com/colintaochen/ElementUI-2.13.2