el-ui复选框的那些坑，你一定遇到过

2019-08-01 本文已影响0人 Hsugar

在一次次遇到复选框的问题后，心中感慨：element-ui的复选框最能出些幺蛾子(╥﹏╥)
以下情景：

当前页面展示的表格列表根据选择弹框的数据展示
列表可删除，再次点击弹框复选框勾选应随之变化
问题1：点击删除后，复选框的勾选没有随之变化
问题2：弹框中勾选数据并没有确认而且弹框未消失，列表数据居然改变了
问题3：弹框中勾选数据，点击确定赋值，目前正常；第二次弹框勾选点击取消列表数据仍然改变了...
问题4： 2.8.2版本及以下表格设置max-height，样式会错乱
解决如下：
针对问题1、2：

//添加班级弹框
addClass(){
    this.showDialog = true;
    Object.assign(this.$data.filterForm,this.$options.data().filterForm);
    this.getClassList();
    this.$nextTick(function() {
    this.toggleSelection(this.choosedList)
    })
    `上篇文章介绍过，复选框的勾选没有双向绑定。需要在表格的store里同步修改`
    if(this.$refs.classList){
      `直接赋值引用数据只是进行了浅拷贝`
        //this.$refs.classList.store.states.selection = this.choosedList
        Object.assign(this.$refs.classList.store.states.selection,this.choosedList)
    }
},

针对问题3：

//点击确定赋值
dialogConfirm(){
  `确定之后直接赋值进行了浅拷贝，所以确定之后再次点击数据被改变`
   //this.choosedList = this.tagArr
    this.choosedList = JSON.parse(JSON.stringify(this.tagArr));
    this.showDialog = false;
},

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝

就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；
序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输;
例如如果请求的Content-Type是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify(data)来序列化参数再传给后端，否则后端接受不到； ps: Content-Type 为 application/json;charset=UTF-8或者 multipart/form-data 则可以不需要）；
但如果对象中存在循环引用的情况也无法正确实现深拷贝

提醒，在弹框关闭或者点击取消时，清空复选框的勾选；等显示时重新赋值勾选，避免勾选错误

//弹框关闭
dialogClose() {
    this.showDialog = false;
    this.$refs.classList.clearSelection()       
},

针对问题4，要不就是升级版本，要不就是自己写样式。相对会处理简单一些
希望对同道中人有所帮助~~ ❥(^_-)

el-ui复选框的那些坑，你一定遇到过

猜你喜欢

热点阅读