关于elementui table组件 —— 竖向表格
【代码】关于elementui table组件 —— 竖向表格。
·
前端模拟数据方式:
html代码👇:
<template>
<el-table :data="tableData" style="width: 60%;margin-top:20px" stripe :show-header="false" border :row-style="rowStyle">
<el-table-column prop="title"> </el-table-column>
<el-table-column prop="name"> </el-table-column>
</el-table>
<template/>
js代码👇:
<script>
export default {
data() {
return {
//表格数据
tableData: {
uesId: '', //部门编号
keyWord: '', //关键词
target: '', //设计效果
}
};
},
mounted() {
const tableData1 = [
{
useId: '编号11111',
keyWord: "关键字关键字关键字关键字关键字关键字关键字关键字关键字关键字",
target: "设计效果设计效果设计效果设计效果设计效果设计效果设计效果",
}
]
const tableData2 = [{
title: "部门编号",
name: tableData1[0].useId
},
{
title: "关键词",
name: tableData1[0].keyWord
},
{
title: "设计效果",
name: tableData1[0].target
}
]
this.tableData = tableData2
},
}
</script>
效果图:

从后端接口获取数据方式:
html代码👇:
<template>
<el-table :data="tableData" style="width: 60%;margin-top:20px" stripe :show-header="false" border :row-style="rowStyle">
<el-table-column prop="title"> </el-table-column>
<el-table-column prop="name"> </el-table-column>
</el-table>
<template/>
js代码👇:
<script>
export default {
data() {
return {
//表格数据
tableData: {
uesId: '', //部门编号
keyWord: '', //关键词
target:'', //设计效果
}
}
},
methods: {
//假定这里是接口数据
getListData( ){
getListData().then((res)=>{
let resData = res.data
const tableData2 = [{
title: "部门编号",
name: resData.useId
},
{
title: "关键词",
name: resData.keyWord
},
{
title: "设计效果",
name: resData.target
}
]
this.tableData = tableData2
})
}
},
}
</script>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)