vue + element 先遍历表头再遍历列表内容

最新推荐文章于 2023-10-31 17:18:19 发布

原创最新推荐文章于 2023-10-31 17:18:19 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

HTML ，js 同时被 3 个专栏收录

24 篇文章

订阅专栏

vue

22 篇文章

订阅专栏

Element-ui

7 篇文章

订阅专栏

本文介绍了一种使用Vue框架实现的动态表格展示方案，该方案能够根据后台传来的不确定数量和类型的列数据，自动生成对应的表格列。通过遍历表头信息，动态生成表格列，并在单元格中显示数据，同时支持编辑和更新操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接了一个新的需求，后台传过来的数据是一个列表，但是这个列表的列不确定有多少也不确定列里面的字段是什么，所以我只能先遍历一下表头然后再编列行那导航里面的数据，不多说上代码

                    <el-table 
                      :data="tableData"  
                      max-height="420" 
                      style="width: 100%" 
                      @selection-change="handleSelectionChange" 
                      @row-click="rowDetails"
                      @cell-dblclick="cellDblDetails">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column label="设备名称" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.epdMachineName}}</p>
                            <p> ({{scope.row.mac}})</p>
                        </template>
                        </el-table-column>
                        <el-table-column 
                          v-for="item in tableConfig" 
                          :key="item.id" 
                          :prop="item.key" 
                          align="center" 
                          header-align="center" 
                          :label="item.key" 
                          min-width="50">
                        <template slot-scope="scope">
                            <div :class="'cellBg_'+scope.row['TAG_'+item.id]">
                                <!-- <input type="text" v-model="scope.row[item.key]"> -->
                                    <!-- <span>{{scope.row[item.name]}}</span> -->
                                    <span v-if="scope.row.isSet">
                                        <el-input size="small" 
                                        v-model="scope.row[item.value]" 
                                        placeholder="请输入内容" 
                                        @change="handleEdit(scope.$index, scope.row)">
                                        </el-input>
                                    </span>
                                    
                                    <span v-else>{{scope.row[item.value]}}</span>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleUpdate(scope.$index, scope.row)">更新</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

具体操作不同的自己再修改一下下吧