vue table表格的使用(动态数据展示)

最新推荐文章于 2025-07-25 17:01:49 发布

頨灧襷瀔

最新推荐文章于 2025-07-25 17:01:49 发布

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端知识

本文链接：https://blog.youkuaiyun.com/weixin_44959893/article/details/89473161

前端知识专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Element UI中表格组件的两种使用方法：一是静态定义列并实现自定义排序；二是动态添加列，展示如何通过v-for循环动态生成列，并在单元格中显示数据。文章提供了具体的代码示例，帮助开发者更好地理解和应用Element UI的表格组件。

第一种方式

	<el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount">
    	<el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="head" :sortable="定义自定义排序项">
    		<template slot-scope="scope">
    		{{tableDataalllist[scope.$index][index]}} // 当前行数据  接收两个参数scope.$index; scope.row
    		<template>
    	<el-table-column>
    <el-table>
<script>
    export default{
        data(){
            return{
            // 数据结构
                tableDataalllist:[{
                    1,'张三','23'
                },{
                    2,'李四','15'
                },{
                    3,'王五','18'
                }],
                header:['id','name','age']
            }  
        },
        methods:{
        // 接受一个obj参数
            totalusercount(obj){
                console.log(obj.prop)  // 排序规则
                console.log(obj.order)  // 排序方式
            }
        }
    }
</script>

id	name	age
1	张三	23
2	李四	15
3	王五	18

第二种方式(动态进行列的添加)

<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="gameareatable.length> 0">
    <el-table-column align="center" v-for="(item,index) in activePlayerDataPropLabelArray" :prop="item.prop" :label="item.label"
      :key="item.prop">
      <template slot-scope="scope">
        {{scope.row[item.prop]?scope.row[item.prop]:'暂无数据'}}
      </template>
    </el-table-column>
    </el-table>

export default {
    data(){
        return{
        // 数据结构  activePlayerDataPropLabelArray为label标签显示label表示当前列th的显示的值,prop表示当前'日期'列下显示date数据,'斗地主'列下显示prop为12的数据,'麻将'列下显示prop为15的数据,
            activePlayerDataPropLabelArray:[{
                label:'日期',
                prop:'date'
            },{
                label:"斗地主",
                prop:"12"
            },{
                label:'麻将',
                prop:'15'
            }],
            gameareatable:[{
               date:"2018-09-10",
               12:'老k',
               15:'一万'
           },{
               date:"2018-08-01",
               12:'炸弹',
               15:'一条' 
           },{
               date:"2018-08-02",
               12:'对子',
               15:'五筒' 
           }]
        }
    }
}