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.所以我这边在配置页面将后台的传来的值又判断了下