饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况

如题,有一个需求,列数量不固定,在一定条件下,可能会(fixedColumn, A2, A3, A4)或(fixedColumn, B2, B3)情况,其中A2, A3, A4会同时出现,B2, B3会同时出现,A与B不会同时出现。
aArray: [ A2, A3, A4],
bArray: [B2, B3],

问题1:

同时有v-for和v-if情况

同时有v-for和v-if情况

解决方法

参考vue官方文档 v-if 与 v-for 一起使用

<template v-if="isA">
  <el-table-column v-for="item in aArray" :prop="item" :label="`${item}(ms)`" align="center" min-width="200px" sortable>
    <template slot-scope="scope">{{scope.row.info[item]}}</template>
  </el-table-column>
</template>

问题2:

自定义渲染的顺序不固定,每次出来的排列结果不一样

最终解决方案

<template v-if="isA">
  <el-table-column v-for="item in aArray" :prop="item" :label="`${item}(ms)`" align="center" min-width="200px" :key="`${item}`" sortable>
    <template slot-scope="scope">{{scope.row.info[item]}}</template>
  </el-table-column>
</template>
<template v-if="isB">
  <el-table-column v-for="item in bArray" :prop="item" :label="`${item}(ms)`" align="center" min-width="200px" :key="`${item}`" sortable>
    <template slot-scope="scope">{{scope.row.info[item]}}</template>
  </el-table-column>
</template>

猜你喜欢

转载自www.cnblogs.com/hiluna/p/12377970.html