实现布局数据渲染以列为单位

1、应用场景，就是鼠标换过同一个列的时候，显示不同的样式，正常都是同一行加颜色（类el-table）

实现方法：

在data里面定义需要循环的类字段，然后对这个数据结构进行循环出所需要的列数，进而在进行列里面的相应的数据读取，一层for循环所需要的列字段，一层循环每个列里面的数据

data里面定义

 

columnList: ['gold', 'silver', 'bronze', 'total', 'rank'],

 

视图

            <ul class="list medal-list" v-show="!showDetail">
                <li
                    class="table-item"
                    :class="[`col${index+1}`,{'active-bg':index===soft+1}]"
                    v-for="(attrItem,index) in columnList"
                    :key="index"
                >
                    <div
                        class="cell-item"
                        v-for="(item,dataIndex) in tableData"
                        :key="dataIndex"
                    >
                        <span v-if="attrItem==='goldRank'" :class="{'blue': item.goldRank<4}">{{item.goldRank}}</span>
                            <span class="org" v-else-if="attrItem==='orgName'">
                                <span class="nation-img">
                                    <img width="50" :src="`/org/${item.org}.png`" :onerror='defaultOrgImg' alt="">
                                </span>
                                <span class="nation-name">{{ item.orgName }}</span>
                            </span>
                        <span v-else-if="attrItem==='gold'||attrItem==='silver'||attrItem==='bronze'">{{item[attrItem].total}}</span>
                        <span v-else>{{item[attrItem]}}</span>
                    </div>
                </li>
            </ul>