elementui table组件的使用
基于elementUI组件对table对使用。
表格的使用
绑定数据tabledata
<el-table
ref="multipleTable"
border
:data="tableData"
tooltip-effect="dark"
height="100%"
@selection-change="handleSelectionChange"
stripe
>
<el-table>
表头的渲染
<el-table-column
v-for="(item, index) in tableLabel"
:key="index"
:prop="item.prop"
:width="item.width"
:label="item.label"
:align="item.align"
:show-overflow-tooltip="true"
:resizable="false"
>
<template slot-scope="scope">
<slot :name="item.prop" :data="scope">
<span>{{ handleTbCellVal(scope.row[item.prop])}}</span>
</slot>
</template>
</el-table-column>
tableLable为表头的数据
循环表头数据来渲染表头,template里面可以在父组件里面覆盖子组件里面渲染的内容。
可以增加表格对列不被tableLable渲染影响
直接el-table-column写在el-table里面实现
tableLable 数据样式
const tableLabel = [{
label: '1',
align: 'center',
prop: '1'
},
{
label: '2',
align: 'center',
prop: '2'
},
{
label: '3',
align: 'center',
prop: '3'
},
{
label: '4',
align: 'center',
prop: '4'
},
{
label: '5',
align: 'center',
prop: '5'
},
{
label: '6',
align: 'center',
prop: '6'
},
{
label: '7',
align: 'center',
prop: '7'
},
{
label: '8',
align: 'center',
prop: '8'
},
{
label: '9',
align: 'center',
prop: '9'
}
]