前言
- 常网IT戳我呀！
- 常网IT源码上线啦！
- 本篇录入vue专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
- 有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
- 接下来想分享一些自己在项目中遇到的场景。
正是因为生命的降临是如此困难， 才值得我们年复一年的庆祝。
一、问题剖析
那是一个倾盆大雨的早上，花瓣随风雨落在我的肩膀上，是五颜六色的花朵。
我轻轻抚摸着他，随后拨开第一朵花瓣，她不爱我。
拨开第二朵，她爱我。
正当我沉迷于甜蜜的幻想中，实习生小白🙋喊道：师傅师傅，我遇到一个问题，帮我看看呗！
🙋🏻♂️真是的，慌慌张张的，说吧~
问题是这样子的：
以下字段是通过配置JSON（前端界面有地方可修改JSON数据）来显示控制的。
有一个表格，有字段A、字段B、字段C，其中字段A、字段C表头颜色标蓝色。
字段C显隐规则：
- 如果没配置JSON该字段对象，则默认显示在表格的列后面
- 如果配置了，就按顺序显示
简而言之：字段C默认显示，但如果有配置，则根据配置的顺序显示。
二、实现思路
控制元素添加
- 先默认读JSON，看是不是有配置字段C，若无，则往表格数组后面添加
- 若有配字段C，则按默认数组显示，后面就不需要手动添加
控制元素颜色
因为是这样子的，字段A、字段B、字段C，只是控制字段C是不是颜色标蓝，有三种情况
- 没配置，默认手动数组加上
- 配置了，当默认字段显示
- 配置了，还配置了isBlue属性，则颜色标蓝
html结构
html
<vxe-grid :data="dataList":header-cell-class-name="headerCellClassName">
<!-- 默认字段 -->
<vxe-colgroup v-for="(item, index) in list">
<vxe-table-column :field="item.prop"> </vxe-table-column>
</vxe-colgroup>
<!-- 固定字段 -->
<vxe-colgroup v-for="(item, index) in fixedFields">
<vxe-table-column :field="item.prop"> </vxe-table-column>
</vxe-colgroup>
</vxe-grid>
<script>
headerCellClassName ({ column, columnIndex }) {
if (this.isBuiltInArr.includes(column.title)) {
return 'col-blue' // 给他绑定了个class，然后class设置颜色
}
},
// 颜色字段
isBuiltInArr(){
const arr = ['字段A', '字段C']
// 查一下有没有设置isBuilt，有就找出来，设置颜色
const isBuiltInList = this.fields.filter(f => f.isBuilt ).map(m => m.__config__.label)
return [...arr, ...isBuiltInList]
}
</script>是的，你可以看到我们用了两组来存放字段，一组默认字段，一组固定字段。
fixedFields没配置手动加在后面，如果有配置就不加在后面，当普通字段，配置了isBlue则颜色标蓝。
三、无中生有arr1
前面的小试牛刀解决完之后，实习生小白尴尬而不失礼节的说，其实还有一道，并摸摸头。
🙋🏻♂️买一送一好吧，COME ON！
另外一种类型的表格是没有配置JSON可以配置的（没有界面可以修改JSON配置）。
通过接口返回的JSON配置，需求目前想要修改某个字段颜色蓝（是动态修改的，希望在界面中可设置颜色）。
实现思路：
我们多加一个可配置的页面出来，显示输入框，内容为接口返回的值，然后可以保存。
这样子，我们就可以配置JSON了。
页面遍历arr，显示字段，我们目前需要实现字段颜色蓝，只需要配置arr的其中一个对象，设置isBlue即可。
有两种方案：
- 第一种是直接在原本的arr修改，设置isBlue，但因为该接口用于很多处地方，所以不太建议修改原本arr数组，不然其他用到这个接口的地方要做兼容修改
- 第二种：从arr复制出一份arr1出来，在arr1里面做修改，设置字段颜色蓝isBlue；多复制一份出来不会影响其他地方的
基于第二点，可以做一个小优化：在可视化进入的时候，加载接口结构，自动帮他复制一份arr到arr1中，就不用手动复制出来了。
🙋实习生小白问：具体咋搞？
操作步骤如下（选方案二）
- 进入配置，复制arr（原属性）成arr1（添加新克隆属性）
- 修改arr1某个字段
- 下次进入可看到arr1
此时更新arr，如加一个字段a，怎么同步更新到arr1呢❓
arr的字段arr1要有，但arr1的字段，arr不需要必有。
第一种，最笨的，手动复制新加的字段a到arr1
第二种，对比id，要保证arr的全部id都显示在arr1里面，如果遍历发现arr有id:2，arr1没有，则添加进去，至于添加到哪个位置，需要加一个索引位置
- 索引位置的应用：只是用于插入到哪里，做个记号
- 如果我想在arr1加一个新的字段蓝，他的索引应该设置多一点，举例子
- arr有1,2,3；arr1：1,2,3
- 如果arr1加一个字段蓝1000，1,2,3,1000，为什么设置这么大，往下看
- 此时arr也加多一个4，即1,2,3,4，这时arr1遍历，发现arr多了4，需要添加进入，把4加在第四个位置，即：1,2,3,4,1000
- 懂了吧，如果你arr1加了索引，是i++的话，那顺序就不对了，1,2,3,4,4，这样子就有问题了，避免重复，索引所以设置大点
如果我想1,2,3,1000,4这样子显示呢
- 没关系呀，上面那个只是插入的索引，并不是渲染的顺序
- 渲染的时候，会根据你arr1写的顺序渲染，代码如下
css
arr1: [
{id:1,index:1},
{id:2,index:2},
{id:3, index:3},
{id:'new-add', index: 1000},
{id:4, index: 4}
]当然，在列表渲染表格的时候，先判断arr1有没有值，有则读，无则用arr，做下兼容。
实习生小白🙋摸了摸胡子，貌似懂了啵，开开心心回去敲代码。
后记
这种类似的场景一般用于可视化低代码平台中。
会根据配置来动态渲染。
做好扩展性，遵守开闭原则。
如果有其他更好的方法也欢迎评论区见，这里提供的只是诸多方法之一。
最后，祝君能拿下满意的offer。
我是Dignity_呱，来交个朋友呀，有朋自远方来，不亦乐乎呀！深夜末班车
👍 如果对您有帮助，您的点赞是我前进的润滑剂。