【Vue】vue v-for 循环el-table-column 第一个数据变到最后一个

Z时代
2024-01-10
分类：技术分享

vue里面的v-for循环使用

 <el-table :data="tableData">
<tr v-for="col in cols">
<el-table-column v-if="col.type==='normal'" :prop="col.prop"
:label="col.label"></el-table-column>
<el-table-column v-if="col.type==='sort'" :prop="col.prop" sortable :label="col.label">
<template scope="scope">
<el-tag type="primary">{{ scope.row.type }}</el-tag>
</template>
</el-table-column>
</tr></el-table>

cols: [{label: '节点编号', prop: 'node', type: 'normal'}, {label: '名称', prop: 'name', type: 'normal'}, {label: '类型', prop: 'type', type: 'sort'},
{label: '坐标', prop: 'coordinate', type: 'normal'}]
tableData:[{
node: '0051',
name: ' 机库顶',
type: 'UWB',
status: '正常',
coordinate: '12.21,34.45,34.6'
}, {
node: '0061',
name: '机库门',
type: 'GPS',
status: '低电',
coordinate: '45.41,67.45,78.6'}]

节点编号这一列跑到了最后一列

查了一下循环流动的问题，没找到合适的方法

回答

<el-table :data="tableData" style="width:100%;height:calc(100%)" :summary-method="getSummaries" @cell-click="cellClick" border fit highlight-current-row show-summary size="mini" height="100%">
  <template v-for="(col, index) in inStoreColSet">
    <el-table-column v-if="col.type == '1'" type="index" :label="col.lable">
    </el-table-column>
    <el-table-column v-if="col.type == '2' ":label="col.lable">
      <template slot-scope="scope">
        <i class="el-icon-plus" @click="add()" style="cursor:pointer"></i>
        <i class="el-icon-minus" @click="descream(scope.$index)" style="cursor:pointer"></i>
      </template>
    </el-table-column>
    <el-table-column v-if="col.type == '3'" prop="col.props" :label="col.lable">
      <template slot-scope="scope">
        <col-inputs ref="input1" v-bind:data="scope.row"></col-inputs>
      </template>
    </el-table-column>
    <el-table-column v-if="col.type == '4'" prop="col.props" :label="col.lable">
       <template slot-scope="scope">
        <col-input ref="input2" v-bind:data="scope.row"></col-input>
      </template>
    </el-table-column>
  </template>
</el-table>