ElementUI之table表格的封装需求：
⿏标移⼊：
实现：
<template>
<el-table
class="table-list"
:data="tableData"
height="440"
:border="false"
:cell-
:header-cell-
>
<template v-for="(item, index) in tableColumn">
<template v-for="(item, index) in tableColumn">
<template v-if="item.prop == 'rank'">
<el-table-column
:key="index"
:label="item.title"
align="center"
header-align="center"
:show-overflow-tooltip="true"
:width="item.width"
>
<template slot-scope="scope">
<span
:class="[
]"
>{{ w.rank }}</span
>
</template>
</el-table-column>
</template>
<template v-else-if="item.prop == 'monthOnMonth'">
<el-table-column
:key="index"
:label="item.title"
align="left"
header-align="center"
:show-overflow-tooltip="true"
:width="item.width"
>
<template slot-scope="scope">
<div>
<span :class="hOnMonth.slice(0, 1) == '-'? 'triangleDown': 'triangleUp'" ></span>
<span :class="hOnMonth.slice(0, 1) == '-'? 'triangleColorRed': 'triangleColorGreen'">{{ hOnMonth.slice(0,1)=="-" hOnMonth.slice(1): hOnMonth}}</span>
</div>
</template>
</el-table-column>
</template>
<template v-else-if="item.prop == 'operation'">
<el-table-column
:
key="index"
:label="item.title"
align="center"
header-align="center"
:show-overflow-tooltip="true"
:width="item.width"
>
<template slot-scope="scope">
<button @click="w, scope.$index)">删除</button>
</template>
</el-table-column>
</template>
element表格横向滚动条<template v-else>
<el-table-column
:key="index"
:label="item.title"
align="center"
header-align="center"
:prop="item.prop"
:show-overflow-tooltip="true"
:width="item.width"
:width="item.width"
>
</el-table-column>
</template>
</template>
</el-table>
</template>
<script>
export default{
data(){
return{
tableColumn:[
{
title:"排名",
prop:"rank",
width:100,
},
{
title:"⽇期",
prop:"time",
width:100,
},
{
title:"标题",
prop:"title",
width:100,
},
{
title:"简介",
prop:"briefIntroduction", width:100,
},
{
title:"作者",
prop:"author",
width:100,
},
{
title:"星级",
prop:"star",
width:100,
},
{
title:"阅读量",
prop:"reading",
width:100,
},
{
title:"同⽐",
prop:"monthOnMonth", width:100,
},
{
title:"地址",
prop:"address",
width:100,
},
// 删除按钮
{
title:"操作",
prop:"operation",
width:100,
},
],
tableData:[
{
id:1,
rank:1,
time:"2004-08-17 00:12:56",
title:"标构青使",
briefIntroduction:"历农收任七其放感将养。", author:"龚秀兰",
star:"★★",
reading:3786,
monthOnMonth:"-74.33",
address:"江西省鹰潭市贵溪市",
},
{
id:2,
rank:2,
time:"1999-04-10 04:15:45",
title:"带间候构",
briefIntroduction:"价向会世维发⽆。",
author:"于洋",
star:"★★★",
reading:4915,
monthOnMonth:"-15.73",
address:"上海上海市宝⼭区",
},
{
id:3,
rank:3,
time:"1975-07-18 03:13:32",
title:"油⽀⼆制布",
briefIntroduction:"存素易之只制图调。",
author:"韩勇",
star:"★★★★",
reading:1373,
monthOnMonth:"28.28",
address:"上海上海市⾦⼭区",
},
{
id:4,
rank:4,
time:"2011-08-26 20:53:00",
title:"回情关⾛也状",
briefIntroduction:"规统⽔要⼚⾝⼤有历易。", author:"常明",
star:"★★★★",
reading:1018,
monthOnMonth:"-3.95",
address:"河南省鹤壁市浚县",
},
{
id:5,
rank:5,
time:"1989-11-24 23:53:12",
title:"⽰强或南",
briefIntroduction:"义⼏⼩叫办⼴实⼰来部。", author:"史勇",
star:"★★★★",
reading:1027,
monthOnMonth:"55.54",
address:"⾹港特别⾏政区⾹港岛东区", },
{
id:6,
rank:6,
time:"2011-06-19 15:28:12",
title:"领今得头",
briefIntroduction:"由东太程电东。",
author:"冯强",
star:"★★★★",
reading:1565,
monthOnMonth:"53.72",
address:"陕西省宝鸡市陈仓区",
},
{
id:7,
rank:7,
time:"2010-12-14 13:09:47",
title:"参⽕矿还⼚精必",
briefIntroduction:"族专⾦会时两采后转⽼⼭确感前强。", author:"⽯强",
star:"★",
reading:2751,
monthOnMonth:"-91.00",
address:"⾹港特别⾏政区⾹港岛湾仔",
},
{
id:8,
rank:8,
time:"1972-01-30 21:15:44",
title:"质期划复",
briefIntroduction:"严改们能选⽆队展并团此。",
author:"邹平",
star:"★★",
reading:1341,
monthOnMonth:"35.31",
address:"⼭西省临汾市吉县",
},
{
id:9,
rank:9,
time:"2000-11-13 23:54:01",
title:"成家理增",
briefIntroduction:"观⽼级得传表命常般⼲可⼈看能。", author:"熊娜",
star:"★★★★★",
reading:4812,
monthOnMonth:"-6.77",
address:"海外海外 -",
},
{
id:10,
rank:10,
time:"1998-10-08 09:16:46",
title:"律再算没部论",
briefIntroduction:"那千压收美管法给次。",
author:"曹强",
star:"★★★",
reading:4485,
monthOnMonth:"-63.57",
address:"⼴东省梅州市平远县",
},
{
id:11,
rank:11,
time:"1974-07-16 04:23:01",
title:"打张拉单",
briefIntroduction:"龙⽅观天⾦中然青⾛往历说长。",
author:"乔丽",
star:"★★",
reading:1051,
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论