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

Question

vue里面的v-for循环使用

 <el-table :data="tableData" style="width: 100%">
            <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'
  }]

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

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

Answer 1

<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>

v-for出最好用template进行封装，这个问题我们也出现，按照上面的格式就可以解决

Answer 2

给v-for加上key试一试

Answer 3

我觉得不应该呀，你看看数据对不对

Answer 4

请问你解决了吗 是怎么解决的呢

Answer 5

请问问题解决了吗，因为el-table-column外面要加东西，没办法直接v-forel-table-column