使用elementUI饿了么框架中的el-table组件，表头动态数据处理和列表中某一项数据循环并且添加样式
使用elementUI饿了么框架中的el-table组件，表头动态数据处理和列表中某一项数据循环并且添加样式
<div class="panel-box">
<div class="panel-title">已开通产品</div>
<el-table :data="productData" stripe style="width: 100%" class="opened-product">
<template v-for="item in productHead"> // 模板循环列表数据和表头
<el-table-column v-if="item.label_data === 'url'" :label="item.label" :key="item.id" align="center">
<template slot-scope="scope"> //循环列表某一项的数据
<div class="get-url">
<p v-for="(v,index) in scope.row.url" :key="index">
<el-link
type="primary"
:underline="false"
:href="v.link"
target="_blank"
>{{ v.link }}</el-link>
({{ v.doc }}地址)
</p>
</div>
</template>
</el-table-column>
<el-table-column v-else-if="item.label_data === 'state'" :label="item.label" :key="item.id" align="center">
<template slot-scope="scope"> //给列表某一项数据添加样式
<span
:class="{ 'danger': scope.row.state === '关闭', 'success': scope.row.state === '运行中'}"
>{{scope.row.state}}</span>
</template>
</el-table-column>
<el-table-column v-else :prop="item.label_data" :label="item.label" :key="item.id" align="center"></el-table-column>
</template>
</el-table>
</div>
productHead: [
{
id: 0,
label: "产品名称",
label_data: "title"
},
{
id: 1,
label: "产品版本",
label_data: "versions"
},
{
id: 2,
label: "访问地址",
label_data: "url"
},
{
id: 3,
label: "开通时间",
label_data: "start_time"
},
{
id: 4,
label: "到期时间",
label_data: "end_time"
},
{
id: 5,
align: "center",
label: "状态",
label_data: "state"
}
],
productData: [
{
id: 0,
title: "ele",
versions: "PRO版(PRO版)",
url: [
{
link: "http://bk.dsjakdjsadk.com",
doc: "初始化"
},
{
link: "http://bk.dsjakdjsadk.com",
doc: "自定义"
}
],
start_time: "2018-12-20 00:00:00",
end_time: "2020-12-20 00:00:00",
state: "运行中"
},
{
id: 1,
title: "admin",
versions: "PRO版本(PRO版)",
url: [
{
link: "http://td.dsjakdjsadk.com",
doc: "初始化"
},
{
link: "http://td.dsjakdjsadk.com",
doc: "自定义"
}
],
start_time: "2018-12-20 00:00:00",
end_time: "2020-12-20 00:00:00",
state: "关闭"
}
]
