前端模拟数据方式：
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.dataconst tableData2 = [{title: "部门编号",name: resData.useId},{title: "关键词",name: resData.keyWord},{title: "设计效果",name: resData.target}]this.tableData = tableData2})}},}
</script>
