element 給table的個別表格框添加樣式 ---重構里面的組件

<el-table

ref="singleTable"

:show-header='false'

:data="tableData"

align='center'

 

highlight-current-row

style="width: 100%">

<el-table-column align='center' property="" label="" :width="40">    // 注意width 溢出不顯示

<template slot-scope="scope">

<div :class="{'activestyle':scope.$index<3,'noactivestyle':scope.$index>=3}">{{scope.$index}}</div>

</template>

</el-table-column>

<el-table-column v-for='(column,index) in columns' align='center' :key="index" :prop="column.property"

:label="column.label"

:width="column.width">

</el-table-column>

</el-table>

 

 

CSS

.activestyle{

border-radius: 50%;

background:#5E5E5E;

color:#fff

}

.noactivestyle{

border-radius: 50%;

background-color:#ddd;

color:#000

}