vue el-table下表头和数据都是活动的

最新推荐文章于 2024-04-15 09:48:23 发布

有趣的Soul。

最新推荐文章于 2024-04-15 09:48:23 发布

阅读量209

点赞数

分类专栏： vue element 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45098257/article/details/116147669

版权

vue 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

element

26 篇文章 0 订阅

订阅专栏

后台传给我的数据是这种形式：
现在的需求就是把红框里面的数据当成表头
后面的数据以此是数据
在这里插入图片描述
从前台查是这种模式：

注意点：<el-table-column v-if="txta > 0" :prop="zybdata[0]" :label="zybdata[0]"></el-table-column>你可以写好多条我还没想出咋循环直接就都出来

<div class="user_skills">
            <el-table :data="tableData" :header-cell-style="{fontSize:'15px',textAlign:'center',background:'#07a1a3',color:'#ffffff',padding:'5px'}"
                      :cell-style="{'text-align':'center','padding':'5px'}">
                <el-table-column v-if="txta > 0" :prop="zybdata[0]" :label="zybdata[0]"></el-table-column>
                <el-table-column v-if="txta > 1" :prop="zybdata[1]" :label="zybdata[1]"></el-table-column>
                <el-table-column v-if="txta > 2" :prop="zybdata[2]" :label="zybdata[2]"></el-table-column>
                <el-table-column v-if="txta > 3" :prop="zybdata[3]" :label="zybdata[3]"></el-table-column>
                <el-table-column v-if="txta > 4" :prop="zybdata[4]" :label="zybdata[4]"></el-table-column>
                <el-table-column v-if="txta > 5" :prop="zybdata[5]" :label="zybdata[5]"></el-table-column>
                <el-table-column v-if="txta > 6" :prop="zybdata[6]" :label="zybdata[6]"></el-table-column>
                <el-table-column v-if="txta > 7" :prop="zybdata[7]" :label="zybdata[7]"></el-table-column>
                <el-table-column v-if="txta > 8" :prop="zybdata[8]" :label="zybdata[8]"></el-table-column>
                <el-table-column v-if="txta > 9" :prop="zybdata[9]" :label="zybdata[9]"></el-table-column>
                <el-table-column v-if="txta > 10" :prop="zybdata[10]" :label="zybdata[10]"></el-table-column>
                <el-table-column v-if="txta > 11" :prop="zybdata[11]" :label="zybdata[11]"></el-table-column>
            </el-table>
        </div>

return下面写上

zybdata:["标题","标题","标题","标题","标题","标题","标题","标题","标题","标题"],
 txta:0

剩下的就是在接口上面写上下面这句话：
注意res.data.data是我取到返回数据路径，根据自己返回数据更改

               .then((res) => {
                            console.log("res")
                            console.log(this.tableData)
                            this.tableData = res.data.data
                            var jbn = 0
                            for (var nnn in res.data.data[0]){
                                console.log(nnn,jbn)
                                this.zybdata[jbn]=nnn
                                jbn ++
                            }
                            this.txta = jbn
                        })