基于element-ui表格的二次封装
在项目中经常会使用到element的表格,如果每次都cv,也确实有点麻烦,基于这个情况我对表格进行了二次封装
写一个Table组件
首先先写表格样式
<el-table
:data="tableData"
:header-cell-style="headerStyle"
:height="height"
:border="border"
@selection-change="handleSelectionChange"
>
<el-table-column
v-if='selection'
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="v in tableProp"
:key="v.label"
:prop="v.code"
:sortable='v.sortable'
:label="v.label"
:width="v.width"
>
<template slot-scope="scope">
<div v-if='!v.code'>
{
{ scope.row[scope.column.property] }}
</div>
<div v-else>
<slot name="row" :row="scope.row"></slot>
</div>
</template>
<el-table-column
v-for="(item, i) in v.data"
:key="i"
:sortable='item.sortable'