Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作,如图所示项目中常用到的表格类型，
实现的代码
需求
1.点击配置的时候弹出这个table
2.可点击旁边的选择框进行单选，多选，全选
3.当选择完成点击保存配置时，关闭再进去显示之前所配置的流程，切换其选择状态
4.当没选中时输入框默认是不可点击的，选中才可点击对其进行操作
实际操作
2.首先在el-table上绑定了ref=aswerTable(主要是为初始化时切换状态调用)；data为其显示的数据；@selection-change=handleevery当选项发生改变时触发的操作；
设置单选，多选，全选很简单：只用加个<el-table-column type="selection" width="100"></el-table-column>就可以了，table-column为这个表的表头，将type设为selection就是选择属性
//...改变触发
handleEvery(val) {
const that = this;
that.sectionData=val;
// console.log(22,val
},
val为选择的每一项，sectionData是新建的一个对象，当选择每一项时val的值就赋到了sectionData里面;
这里接受后台的值主要是通过table自带的作用域插槽接受solt-scope="scope"，当然你也可以选择用prop接收；
3.点击保存，在进入还是之前选择的项
1.由于有多个地方都要用到，我这边给他简单的封装了一下切换选择状态的函数
toggleRowSelection可切换某一行 的选中状态可接受两个参数，后方可设置false为不选中，默认是选中的；
这个函数的作用就是当我从外部调用这个函数，传入一个数组参数，如果有这个参数就把这个对象通过forEach循环，enabled(是后台给定的一个判断是否选中的参数)；
如上图所示这是当点击配置的时候调用的一个方法，当点击配置的时候，that.answerShow=true显示弹窗；
由于下方调用后台接口是将后台传来的数据插入到everyData(table的显示数据)里面，所以我调用这个方法的时候判断了下，如果里面有值就给他设为空；
在显示弹窗的时候调用之前定义的 toggleSelection2 函数并把显示数据传入，通过判断他里面的enabled===true来将为真的项切换为选中状态；
保存
当保存的时候先将其显示的数据循环，把其enabled设为false；
然后通过let sss绑定一个方法把之前选中的值的id(为唯一的值，通过这个值判断)通过map循环拿出来；
最后把everyData在循环一次，如果在选中的值里面找到这个id，将其enabled设为true，否则为false；
需求四 输入框实现为选择不可点击
1.首先在input上绑定个disabled（不可点击，这个属性在input选择框有点BUG，比较懒）或者readonly（只读，用这个的话需要改变下点击的样式）；
2通过选项改变的时候判断enable的值是否为true（由于table的多选框是拿不到他的状态，只能通过方法动态切换他的状态），为true时将绑定的值设为false
选项改变触发的事件
操作：
1.由于选项改变是选项改变时才触发，我在点击配置的时候默认通过that.toggleSection2切换了他的状态，所以dialog弹窗出来的时候他就是触发的；
2.在这里点击选项的时候首先把选项的值的id通过map遍历出来存到遍历sec里面；
3.然后循环显示数据everydata的每一项，然后在变量sec里面找这个id（id是唯一值），当找到的时候把他的enabled设为true，不可点击disAbled设为false；
4.最后完成这项之后通过that.toggleSection2(that.everyData)把选项给动态切换了,因为由于初始化请求后台数据的时候就把enabled为true的给他默认切换了选项，所以刚开始就触发了选项改变这个事件，所以在选项改变的事件里面又给他走了一遍，不然状态是没有更新的（详见下图）
配置方法
1.还有个bug就是如果之前没选中输入框那个按钮，点击保存，在进入那个页面disabled还是可以点击输入的
2.所以我这边在配置页面将后台的传来的值又判断了下
网友评论