element-admin之table踩坑记

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容