vue table表格的使用(动态数据展示)
第一种方式<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...
·
第一种方式
<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:'五筒'
}]
}
}
}
日期 | 斗地主 | 麻将 |
---|---|---|
2018-09-10 | 老k | 一万 |
2018-08-01 | 炸弹 | 一条 |
2018-08-02 | 对子 | 一万 |
更多推荐
已为社区贡献6条内容
所有评论(0)