给element-ui补丁包

• 前言
• 一、toggleRowSelection
• path-package

---

前言

最近使用el-table需要做一个选中回显的功能，其中包括切换tab页后回显（三个tab页公用一个选中，还有一个表格带分页）。

---

一、toggleRowSelection

官网介绍是：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

// 调用
toggleSelection([tableData[1], tableData[2]])
// 方法
toggleSelection(rows) {
   if (rows) {
     rows.forEach(row => {
       this.$refs.multipleTable.toggleRowSelection(row);
     });
   } else {
     this.$refs.multipleTable.clearSelection();
   }
 },
 // 分页记住选中不需要调用方法，添加row-key（有数据就行，不一定是列）
<el-table row-key="id"
<el-table-column reserve-selection type="selection" ></el-table-column>
</el-table>

代码如下（示例）：由于我将选中的rows存在了el-tab级，选中后添加数据，切换tab页后将数据克隆后调用回显，发现selection加上了（重复数据没判断），回显也没有。

// 源码：实际执行的是打包文件node_modules/element-ui/lib/element-ui.common.js
// 10198
function toggleRowStatus(statusArr, row, newVal) {
  var changed = false;
  var index = statusArr.indexOf(row);
  var included = index !== -1;

  var addRow = function addRow() {
    statusArr.push(row);
    changed = true;
  };
  var removeRow = function removeRow() {
    statusArr.splice(index, 1);
    changed = true;
  };
  ...

Array indexOf() 是对数组方法对象的话只能是地址了。。，

//10779
isSelected: function isSelected(row) {
   var _states$selection = this.states.selection,
       selection = _states$selection === undefined ? [] : _states$selection;

   return selection.indexOf(row) > -1;
 },

这个是renderCell渲染组件判断复选框是否选中的方法，也是地址，这两个地方要改一下。

path-package

patch-package适用于对npm包简单的修改，它能在不copy源码修改依赖的前提下，将修改记录下来，利用git进行管理

// 加在dev就行了
"devDependencies": {
"patch-package": "^6.4.7",
}
//"postinstall": "patch-package"yarn的时候自己打补丁
"scripts": {
   "serve": "vue-cli-service serve --mode development",
   "build: lib": "webpack --config build/webpack.dll.config.js",
   "postinstall": "patch-package"
 },

后面就简单了，直接改源码，执行npx patch-package element-ui记录补丁，
在项目里生成patches/element-ui+2.15.1.patch，删除node_modules后重新yarn一下看看里面改的内容有没有，里面有改的内容。改一丢丢可以这么玩，多了就别弄了。

// 我yarn完有这个
$ patch-package
patch-package 6.4.7
Applying patches...
element-ui@2.15.1 ✔