vue表格上的控件显隐的一些想法

在做表格组件中，常常需要进行编辑操作，即点击单元格出现数据框操作，针对本人遇到的一些问题，这里记录一下一点不成熟的想法备忘。
但是引发了我一个思考，当一个表格特别复杂的时候，数据量比较多的时候，就要更多的标识字段进行显隐控制，我们有这样几种方法处理。
处理：

1. 对于表格中的数据进行一个格式化操作，前台获取到后台数据以后进行一个格式化操作，比如将名称字段格式化成 name：{show:fase,value: xxxx},这样增加了数据的深度，并且对于每个数据都要遍历和重组，次数为：行数x列数，况且每次进行编辑可能页面的数据要进行刷新，每次刷新又要进行重组。
2. 对于表格中每一行都是一个对象数据，可以从后台将控制字段进行绑定后一并的回传到前台，但是这样做在极端情况下会加大数据传输的压力，对于流量会造成耗费。而且循环次数并没有减少。
3. 还有就是在前台中对于需要的每一个控件都建立一个字段，控制字段的值来完成控制，但是这样对于人工的开销就更加的大。

基于上述理由，本人突发奇想，提出以下 方案解决，虽然。。。。。不一定是最优的，但是解决了一些问题，基于vue+element也已经实现
方案如下：

思想： 对于第一个问题我不再再建立子级字段，对于第二个问题，也不采用从后台绑定字段，对于第三个问题使用更加自动化的方式。
方案：

• 首先对于前台来说，在数据被渲染进入表格之前，在页面打开时实例中就已经存在表格的信息我们可以通过引用组件来获得表格的列数，生成一个数组。然后对于表格中的每一行在加载数据对象时进行装入，这样的循环次数变成了 列数+对象数。减少了开销。
• 在加载页面或者打开表格时候获取表格列信息

//生成配置组件的显隐
        this.$nextTick(function () {
            // xxxxx为ref属性值     
            this.$refs.xxxxx.columns.forEach((item) => {       
                this.textOrInput.push(false);
            });
        });

• 通过这种方式获得表格一共多少列，并根据列数生成一个数组，这个数组的每一个元素都可以用来控制一个组件的显隐
• 加载数据时

http.post.........{   //获取后台数据
	  // 根据响应原理  将控制组件显隐的属性设置为可被实例响应的
                this.receiveData = res.result.map((item) => {
                    item.textOrInput = [];
                    this.textOrInput.forEach((itemin, index) => {
                        this.$set(item.textOrInput, index, itemin);
                    });
                    return item;
}

• 如果不使用$set函数设置响应那么在页面中，vue将不会对textOrInput数组中的元素值变化响应，当然v-if v-show 等也不会有效果，（大概是因为vue不能自动检测深层次数据变化的吧！（小声哔哔））
• 最后配合表格单元格的失焦，获得焦点函数使用$set改变值就可以实现复杂的组件显隐了。