用v-for为elementUI的表格,根据json对象自动生成列,如何指定渲染顺序?

列车
  • 33

使用element的表格组件,想制作根据json对象或json集合自动生成列的功能。基于v-for渲染制作,其v-for代码如下:

 <template v-for="(tvalue, tkey,index) in columns">
       <el-table-column  
            :label="tvalue.label" >
            <template slot-scope="scope">
                <font :color="tvalue.fontColor" >{{ scope.row[tkey] }}:{{index}}</font>
            </template>

        </el-table-column>
         </template>

但渲染顺序并不是按照index,也就是开发者编写的json对象代码那样的顺序渲染,
,效果图如下

使用v-for="(value, key, index) in object 或" 渲染一些内容,如上图所示,第一个渲染的列不是第1列,也就是{{index}}不是0,第1列显示到最右边去了。(操作按钮的所在列不是生成的)。

这是什么原因?如何指定v-for的渲染顺序?根据index或者其他属性渲染?

回复
阅读 192
2 个回答

因为对象是无序的嘛,但是数组是有序的,所以你可以再定义一个数组。然后渲染这个数组。

columns = [
  {col: 'id',filter: 'text'},
  {col: 'age',filter: 'text'},
  {col: 'createtime',filter: 'time'},
]

 <template v-for="(tvalue, tkey,index) in columns">
       <el-table-column  
            :label="tvalue.label" >
            <template slot-scope="scope">
                <font >{{tvalue.col}}:{{ scope.row[tvalue.col] }}</font>
            </template>

        </el-table-column>
         </template>

首先 Ele 的 table 组件,会按照你的 <el-table-column> 的顺序来展示。

因为你的表格数据没有贴出来,只能让你先检查一下 columns 的数据,它如果是数组,请检查字段顺序,
如果是对象请转换成数组的形式,对象的属性是无需的,Chrome会按照 数字-字母 的顺序来输出

image.png

你知道吗?

宣传栏