记一次element-ui源码修改，radio和checkbox兼容对象数组形式
首先要实现的需求：
后台返回的接口数据
{
"list": [
{
"name": "副主任", //职务名称
"positionId": 8, //职位id
"partyOrgName": "第三党支部", //组织名称
"partyOrgId": 3 //组织id
}
],
"name": "第三党支部", //组织名称
"partyOrgId": 3 //组织id
},
{
"list": [
{
"name": "委员",
"positionId": 3,
"partyOrgName": "第二党支部",
"partyOrgId": 2
},
{
"name": "第一书记",
"positionId": 5,
"partyOrgName": "第二党支部",
"partyOrgId": 2
},
{
"name": "副主任",
"positionId": 6,
"partyOrgName": "第二党支部",
"partyOrgId": 2
},
{
"name": "第一书记",
"positionId": 7,
"partyOrgName": "第二党支部",
"partyOrgId": 2
}
],
"name": "第二党支部",
"partyOrgId": 2
},
因为是二维数组的单选，所以采用radio-group的形式去做，aLLData存放全部的组织架构列表，把勾选的放在checkList里
<el-container class="select-container">
<div class="left-aside">
<div class="check-group" v-for="(item, index) in aLLData" :key="index">
<p>{{item.name}}</p>
<el-radio-group v-model="checkedList[item.partyOrgId]" @change="groupChange">
<ul>
<li v-for="(subItem,index) in item.list" :key="index">
<el-radio :label="subItem">{{subItem.name}}</el-radio>
</li>
</ul>
</el-radio-group>
</div>
</div>
<div class="middle-line"></div>
<div class="right-main">
<p>请勾选职位</p>
<ul class="selected-List">
<li class="select-item" v-for="(item,index) in checkedList" :key="index">
<p>{{item.partyOrgName}}-{{item.name}}</p>
<i class="iconfont icon-shanchu" @click="delChecked(index)"></i>
</li>
</ul>
</div>
</el-container>
props:接受全部数据
props: {
aLLData: {
type: Array,
default: [],
},
},
data:checkList双向绑定被勾选的数据
data() {
return {
checkedList: {},
};
},
感觉很容易就实现了haha~~
再写一个删除方法就完工：
delChecked(index) {
this.$delete(this.checkedList, index);
},
原本以为这就结束了，然后编辑的时候需要回显，回显的时候radio-radio一直勾选不上
打开控制台，发现input value中已经有值了，但是input和label缺少一个is-checked
能成功切换到另一个并勾选
翻看radio的文档，发现只允许绑定string/number/boolean，并不支持对象的绑定
于是考虑修改element的源码，让其能够简单兼容对象的绑定
1.首先克隆项目，到本地
https://github.com/ElemeFE/element
2.npm/cnpm install安装依赖
3.打开element-dev下packages,radio,src下的radio.vue,可以看到is-checked绑定的就是model===label,然而两个同样的对象是否相等无法用===或者==判断
于是增加一个判断，把对象转换成string再判断一次：
4. 改好之后执行cnpm run dist，如果有报错可能是lint报错，打开package.json,找到dist命令，把里面的& lint删除再执行命令
"dist": "npm run clean && npm run build:file && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
5.然后把生成的lib文件夹，整个替换到自己项目的nodel_modules的element-ui的lib文件夹（如果装有多个版本的element-ui，则需替换项目中package.json对应的版本中的lib）
6.再重新运行，发现已经OK了
7.补充一下：
后来发现公司用jenkins自动构建的时候会重新npm i下载全部依赖后构建，所以自己node_modules中的文件夹的修改并不起效果。。。
于是想了两个解决方案
一个是项目根目录新建一个native_modules文件夹，把修改好element-ui的lib文件夹放进这里，同时main.js文件对element-ui的引用换成如下，可以实现效果
import ElementUI from '@/../native_modules/element/lib/index.js';
另一个是直接给自己的改好的element-ui建一个npm,引用线上地址,也ok
<script src="https://cdn.jsdelivr.net/npm/garden-element-ui@1.0.0/lib/index.js"></script>
cdn加载各种依赖方法：在vue.config.js中的configureWebpack里的externals加上element-ui
configureWebpack: {
name: name,
resolve: {
alias: {
"@": resolve("src")
}
},
externals: {
vue: 'Vue',
"vue-router": "VueRouter",
vuex: "Vuex",
moment: "moment",
axios: "axios",
'element-ui': 'ELEMENT',
'Qs': 'Qs',
echarts: 'echarts',
lodash: '_',
}
},
