修改element-ui源码toggleRowSelection--patch-package

2021/9/8 11:06:04

本文主要是介绍修改element-ui源码toggleRowSelection--patch-package,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

给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 ✔



这篇关于修改element-ui源码toggleRowSelection--patch-package的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程