因为项目用到table的地方比较多,所以进行了第二次封装,但因有些字段需要格式化或者添加图标,所以需要用到 formatter和 template scope
父组件:
<hs-table :data="resultDetailData" :columns="detailColumns"></hs-table>
detailColumns:[
{label:'编号',prop:'id',width:'100'},
{label:'户主名',prop:'name',width:'120'},
{label:'性别',prop:'sex',width:'100',formatter:'sexFormat'},
{label:'状态',prop:'status',width:'150'},
],
子组件:
<el-table
:data="data.content"
height="100%"
:header-cell-class-name="headCellClass"
:cell-class-name="cellClass"
:row-class-name="rowClass">
<el-table-column v-for="(column,index) in columns"
:key="index"
:label="column.label"
:prop="column.prop"
:width="column.width"
:min-width="column.minWidth"
:show-overflow-tooltip="column.showTootip"
:formatter="column.formatter"
align="center">{{column.formatter}}</el-table-column>
</el-table>
这样写会报错,因为formatter我传过去的是字符串,另外还有一个'状态'是需要添加图标的,我没封装前是这样的.
<el-table-column label="状态" prop="status" width="150" align="center">
<template slot-scope="scope">
<i v-if="scope.row.status == 0 " class="el-icon-thirdoffline"></i>
<i v-else class="el-icon-thirdonline"></i>
<p class="statusTxt">{{scope.row.status|formatStatus}}</p>
</template>
</el-table-column>
可以尝试下:https://github.com/liub1934/l...
Demo及预览:https://github.liubing.me/lb-...