使用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>

完成~~~~~~~~