使用vue+element的table实现多列checkbox

最近接到一个任务需求，下图是需求表格：
要求点击定时任务这一行的选择框时每一个选择框要能控制其所对应的列的选择框的状态，反之其对应列的状态也能控制定时任务那一行的选择框的状态，简而言之就是单选和反选。事件类型和优惠券还有骑行卡这些是根据后端接口循环得出来的。这时我们就不能简单的用element里面的table表格自带的checkbox去实现了，刚开始想的是表格套表格，但是最后发现这样太麻烦了，需要循环的层级太深，容易弄混，最后还是用了一个表格，让定时任务跟其下面对应的事件成为并列关系（其实还是父子关系）
最后是选择封装一个业务组件，大致的html代码如下
最后加一些逻辑可以实现要求所需功能