iview的table 组件展开事件能否绑定到其他事件上？看这里!

许多小伙伴在使用iview的table表格展开列的时候可能会碰到一个问题，就是它的列展开事件能否去绑定到你正在点击当前列的某一个自定义按钮上呢？

 

去查看官网的时候，官网文档也只说了个有个属性_expanded 设置为true 的情况下可以打开当前列。

不过百度了下发现大多数人还是不清楚如何让两者进行联动。事件进行绑定呢？

首先。我们先要去项vue的的原理是什么？

数据驱动视图。

当我们要改变某一个显示的时候我们则要改变的是某一个数据，而不是强加绑定事件。

当然你要是找到事件也行。如果找不到的情况下，我们可以通过数据改变来进行默认展开某一列。当然很多人已经试过了直接给某一列数据加上 _expanded ：true 改变是没有作用的。

是因为，你当前数据已经被渲染上了，而表格的渲染则需要你重新调用表格更新方法。

当你的表格更新是默认放在created 或者其他页面一加载就出现的属性的时候，这时候你则需要去改变当前的data数据，也就是你当前表格绑定的数据。

首先，深拷贝当前table 数据到一个新数组。

然后将当前的新数组中你正在点击列的 _expanded  属性改成true

然后将这个新数组重新赋值给data。

这时候你再去试就会发现效果触发了。

其实原理很简单。就是，当你点击某一列按钮的时候 去重置了整个表格的data，也相当于调用了新的数据获取方法。

这时候属性才是生效的。

public addCallHost(params) {
    let arr = [];
    this.data.forEach(element => {
      arr.push(element);
    });
    arr[0]._expanded = true;
    this.data = arr;
}

欢迎各位大佬讨论互助。一起学习一起进步，可以加我qq 一起交流。736638270