一、需求背景
在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。
二、需求分析
可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。
三、解决方案
经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下：
<el-row v-for="(btnArr, index) in oprBtn" :key="index">
<el-col v-for="(btn, index) in btnArr" :key=''btn.laberid">
<el-button type="text" @click="btnClick(btn.laberid)"></el-button>
</el-col>
</el-row>
let arrTmp = []
this.displayBtn = []
if (this.displayBtn.length === 1) {
this.oprBtn.push(this.displayBtn)
} else {
this.displayBtn.forEach((item, index, cols) => {
arrTmp.push(item)
if ((index + 1) % 2 === 0) {
this.displayBtn.push(arrTmp)
arrTmp = []
}
})
}
四、问题分析
在使用 elementUI 的el-table 组件时，表头应用v-if判断来动态显示，正常来说这样的操作是没有问题的，但是如果在这基础上使用 <template slot-scope="scope"> 操作的话，表头一旦切换就会报错，错误信息如下：
_self.$scopedSlots.default is not a function
当应用v-for或者v-if切换标签，多个相同的标签被渲染时，如果不添加key来区分则会出现元素复用的情况。而原本这些标签都是独立的，故需要添加key来做区分！
可以给包含 <template slot-scope="scope"> 的<el-table-column>标签列加上属性 key 属性。如无唯一标识，可应用:key=Math.random().
官方提示用key属性管理复用元素
注：不推荐使用index作为key，因为这种做法会导致某些节点被错误地原地复用，具体表现如下：
- 性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于key没发挥作用）。
- 出现错误：某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
