elementui formatter使用问题

因为项目用到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>
阅读 9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题