项目任务，根据 不同的数据，自动生成，合适的表格
项目如图：
①分析：
返回数据有两种，标题+文字说明、标题+超链接。在文字说明中分为短文字、长文字。综合，返回数据可以分为三种形式来展示。
②思路：
定义三个组件，在主页面中遍历得到的数据，判断该条数据类型，选择当前使用哪个组件来显示。
③步骤：
1.定义双列表行，也就是一行显示两条数据，新建一个single.vue文件，设置行内显示占比50%；（5+7=12 、12/24 = 50%），使用<el-row>包住<el-col>设置自动换行可以自动换行显示数据
<template>
<div>
<el-col :span="5">
<div class="grid-content">
{{ title }}
</div>
</el-col>
<el-col :span="7">
<div class="grid-content left">
{{ content }}
</div>
</el-col>
</div>
</template>
<script>
export default {
name:‘Single‘,
props:{
msg: String,
title:String,
content:String,
}
}
</script>
2.新建文件夹显示一行大数据。Double.vue文件。为什么在<el-col>外面加一层<el-row>呢？如果这个数据前面是只剩12给他，需要大数据自动换行，单独占一行，保持表格不会乱。
<template>
<div>
<el-row> //非常重要
<el-col :span="5">
<div class="grid-content">
{{ title }}
</div>
</el-col>
<el-col :span="19">
<div class="grid-content left">
{{ content }}
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name:‘Double‘,
props:{
msg: String,
title:String,
content:String,
}
}
</script>
3.新建超链接界面，btn.vue
<template>
<div>
<el-col :span="5">
<div class="grid-content">
{{ title }}
</div>
</el-col>
<el-col :span="7">
<div class="grid-content left">
<a v-bind:href="url" style="color:#67C23A;text-decoration:none;">点击查看</a>
</div>
</el-col>
</div>
</template>
<script>
export default {
name:‘Btn‘,
props:{
title:String,
url:String,
}
}
</script>
好。现在三个组件都 完成了，接下来在主页面中循环数据，判断数据类型，显示不同的组件
1.引入组件
import Single from ‘./Single‘; import Double from ‘./Double‘; import Btn from ‘./Btn‘;
在script中使用
components:{
Single,
Double,
Btn
},
2.循环
<el-row>
<div v-for="item in tableData">
<Single v-if="(item.value)!== undefined && (item.button)== undefined && (item.value).length < 15 " v-bind:title="item.title" v-bind:content="item.value" />
<Double v-if="(item.value)!== undefined && (item.button)== undefined && (item.value).length >= 15 " v-bind:title="item.title" v-bind:content="item.value" />
<Btn v-if="(item.button)!== undefined" v-bind:title="item.title" v-bind:url="item.button.url" />
</div>
</el-row>
完成~~~~~~~~
原文：https://www.cnblogs.com/blog-zy/p/10831978.html