使用vue+elementUI组件实现表格自动完成

项目任务，根据 不同的数据，自动生成，合适的表格

项目如图：

①分析：

返回数据有两种，标题+文字说明、标题+超链接。在文字说明中分为短文字、长文字。综合，返回数据可以分为三种形式来展示。

②思路：

定义三个组件，在主页面中遍历得到的数据，判断该条数据类型，选择当前使用哪个组件来显示。

③步骤：

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>

完成~~~~~~~~