vue element表格数据 Table 表格 行数据转列显示 列数据转行显示
【代码】vue Table 表格 行数据转列显示 列数据转行显示。
·
效果
附代码
<template>
<div class="dashboard-editor-container">
<span style="color: red ">行数据</span>
<el-table
:data="data"
style="width: 50%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
</el-table>
<span style="color: red ">行转列显示</span>
<el-table
:data="tableData"
border
style="width: 50%">
<el-table-column
v-for="item in columnData"
:label="item.label"
:prop="item.prop"
>
<template slot-scope="scope">
{{scope.row[item.prop]}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
data: [{
date: '1',
name: '哈哈哈'
}, {
date: '2',
name: '啦啦啦'
}, {
date: '3',
name: '嘻嘻嘻'
}, {
date: '4',
name: '略略略'
}],
tableData: [], //表格数据
columnData: [ //表格标题数组
]
}
}, created() {
this.init()
},
methods: {
init() {
const _this = this
const columnObj = {} //创建标题数组中第一个对象
columnObj.label = '日期'//第一个标题名称
columnObj.prop = 'title'//第一个标题名称对应的字段
_this.columnData.push(columnObj) //第一个标题 放入标题数组中
_this.tableData.push({ 'title': '姓名' }) //表格数据中第一个对象数据 属性名叫 title 与上面的第一个prop设置一样
var props = 'prop' //自定义字段名称
_this.data.forEach(function(item, index) {
const columnObj = {}
columnObj.label = item.date // 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
_this.columnData.push(columnObj)
_this.$set(_this.tableData[0], columnObj.prop, item.name)//表格数据中第一个数组对象 往里面添加自定义的属性
})
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)