初入前端，为公司的一个项目写运营端，使用的组件是elementUI，遇到了表格选项框的一些问题，现已解决，现整理如下：

需求

1.这个表格是一个模块关联部分的表格。用户在选择了对应的词条后再去关联对应的法律章节。要做的操作则是在加载法律章节表时，有些章节之前已经与相应的词条关联，那么加载时就自动勾选显示（让用户了解到该章节之前已经勾选过）
2.实现点击表格的其中一行，则该行选项框被勾选
3.对于已经选过的仍可以取消勾选，翻页后可以累加选项

实现

先从比较简单的需求说开

1.点击整行勾选

el-table中有一个row-click事件，可以用它来实现

<el-table:data="tableData"border@selection-change="handleSelectionChange"style="width: 100%;"ref="multipleTable"@row-click="clickRow"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="编号" width="70"></el-table-column>
</el-table>

// 选中整行clickRow(row, column, event) {this.$refs.multipleTable.toggleRowSelection(row);}

在加载表格时，之前已经勾选过的，默认勾选状态

注：该功能需与后端配合
在加载表格时，后端返回的数据中会对每一条数据再添加一个isSelected属性，如果为1，则是之前勾选过，加载时也需要处于勾选状态。
后台数据大概这样

{
"code":0,
"message":null,
"data":
{
"partIdList":[18,19,9,8,7,29,28,4,5,6,41,42,43],
"lawList":
[
{"id":1,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"度。","tiaoNum":null,"source":null,"voiceId":1,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":null,"lawParts":null,"resLawPartId":1,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},{"id":2,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"法。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":null,"lawParts":null,"resLawPartId":2,"duration":null,"formatDuration":null,"viewCount":null,"lawName":""},
{"id":3,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"元。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":null,"lawParts":null,"resLawPartId":3,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},
{"id":4,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":1,"lawParts":null,"resLawPartId":4,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},
{"id":5,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"进。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":1,"lawParts":null,"resLawPartId":5,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},{"id":6,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"相关监管部门和银行制定完善制度100多项，已收回违规发放或挪用贷款220.3亿元，处理693人次。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":1,"lawParts":null,"resLawPartId":6,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},{"id":7,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"员。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":1,"lawParts":null,"resLawPartId":7,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国人大常委会关于批准2012年中央决算的决议"},{"id":8,"lawId":1,"fileTitle":null,"zhangTitle":null,"jieTitle":null,"tiaoContent":"全国人大常委会专题报告。","tiaoNum":null,"source":null,"voiceId":null,"videoId":null,"seq":null,"isDelete":0,"createTime":"2019-12-07T03:18:57.000+0000","lastUpdateTime":"2019-12-07T03:18:57.000+0000","isSelected":1,"lawParts":null,"resLawPartId":8,"duration":null,"formatDuration":null,"viewCount":null,"lawName":"全国"}
],
"paging":{"pageOffset":0,"pageNumber":1,"pageSize":10,"pageTotal":90,"totalCount":898}
}
}

首先，所获后台数据赋值tableData，即el-table绑定的变量

 this.tableData = res.data.data.lawList;this.partIds = res.data.data.partIdList;

之后获取isSelected为1的对象，勾选

// 用于在页面加载，筛选出isSelected为1的对象，打钩var lists = this.tableData.map((value, index, arr) => {if (value.isSelected == 1) {return this.tableData[index];}});if (lists) {lists.forEach(list => {this.$refs.multipleTable.toggleRowSelection(list, true);});}

取消已勾选，或新增勾选提交后台

后台的需求是需要将已经勾选的项id已","分割传过去，类似于

同时在上边后台返回值中也可以看出，后台会返回一个pardIdList，意指之前勾选过的全部id。（由于翻页的原因，我在第1页勾选完的关联id提交后，在第二页再次勾选会重新提交，第一页的关联将失效，所以后台返回了这个pardList，客户在当前页作的提交会与这个partIdList作比较，如果有相同的就不管，如果有新增的就新增，有的要删除就删掉）
目前新增和相同的去重其实都是很容易实现的，但是某些之前已经选过的，取消勾选却遇到了一些问题
最初我用的是elementUI提供的selection-change事件

该事件正常使用还是很方便的，但是其参数是selection，相当于我每次都只能看到所有勾选的项，但是我并不知道对方具体点击了哪一行，更不知道对方是取消勾选还是点选勾选。故而舍弃
之后再次翻阅，发现elementUI还提供了另一个事件

即客户手动勾选时我可以知道客户操作的那一行，以及所有已选项，但是这又面临一个新的问题：即客户必须将鼠标移到那个方形选项框中才会触发此事件，其它情况下都不行，这样显然是不方便的，所有最终选择了另一个事件row-click，虽然操作多了一些，但是使用更加方便了。

//row-click绑定事件clickRow(row, column, event) {this.$refs.multipleTable.toggleRowSelection(row);//data中绑定一个变量rowthis.row = row;},

同时也绑定selection-change

// 当勾选时拼接字符串//选项框变化时，selection-change绑定事件handleSelectionChange(selection) {let self = this;// 筛选出选中项的idthis.multipleSelection = selection.filter(item => item);var str = this.multipleSelection.map(function(value, index, arr) {return value.id;});if (this.row) {// 勾选项idlet selectedId = this.row.id;// 判断是取消勾选还是勾选if (str.indexOf(selectedId) == -1 &&self.partIds.indexOf(selectedId) !== -1) {//取消勾选则是从partId中删除self.partIds.splice(self.partIds.indexOf(selectedId), 1);} else if (str.indexOf(selectedId) !== -1 &&self.partIds.indexOf(selectedId) == -1) {//增加勾选增push进去self.partIds.push(selectedId);}//数组去重self.partIds = [...new Set(self.partIds)];self.subForm.briefIdString = self.partIds.join(",");}},

至此功能基本完成，但是后来发现自己忽略了一个问题即勾选全选的情况
所以现在加上

 // 当全选勾选时所触发的事件selectAll(selection) {let self = this;self.row = "";// 筛选出所有选中项的idlet multipleSelection = selection.filter(item => item);// console.log(multipleSelection);if (multipleSelection.length == 0) {this.tableData.forEach(function(value, index, arr) {if (self.partIds.indexOf(value.id) !== -1) {self.partIds.splice(self.partIds.indexOf(value.id), 1);}});self.subForm.briefIdString = self.partIds.join(",");} else {var str = multipleSelection.map(function(value, index, arr) {return value.id;});self.partIds = self.partIds.concat(str);self.partIds = [...new Set(self.partIds)];self.subForm.briefIdString = self.partIds.join(",");}},

因为勾选全选时，同时也会触发selection-change绑定的函数，this.row的赋值会有冲突，所以新增了一个定时器，异步执行

handleSelectionChange(selection) {let self = this;// 筛选出选中项的idthis.multipleSelection = selection.filter(item => item);var str = this.multipleSelection.map(function(value, index, arr) {return value.id;});// 设置定时器是为了比曼点击全选部分所出现的冲突setTimeout(() => {if (this.row) {// 勾选项idlet selectedId = this.row.id;// 判断是取消勾选还是勾选if (str.indexOf(selectedId) == -1 &&self.partIds.indexOf(selectedId) !== -1) {self.partIds.splice(self.partIds.indexOf(selectedId), 1);} else if (str.indexOf(selectedId) !== -1 &&self.partIds.indexOf(selectedId) == -1) {self.partIds.push(selectedId);}self.partIds = [...new Set(self.partIds)];self.subForm.briefIdString = self.partIds.join(",");}}, 0);},

至此功能全部完成。
初入前端，第一次做一个完整的项目，这也是第一次写博客，写项目的时候也遇到了很多问题，大多通过百度解决。感觉路还很漫长，所以记录下自己遇到的问题。
发现博客比想象中难写多了，自己很难用语言表述那些问题和需求，还需要再接再厉。希望养成这个习惯，以后越来越好。