vue+element-ui:table表格中的slot 、formatter属性

slot 插槽,table中表示该行内容以自定义方式展示

:formatter 方法,用来格式化内容

Function(row, column, cellValue, index)

html

<template-table
      ref="multipleTable"
      :tableData="tableData"
      :config="tableConfig"
      :pageConfig="pageConfig"
    >
    <template slot="avatar" slot-scope="scope">
       <img :src="scope.row.avatar" width="40" height="40" />
    </template>
    <template slot="btns" slot-scope="scope">
      <el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 1)">通过</el-button>
      <el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 2)">不通过</el-button>
    </template>
</template-table>

 

js

export default {
  data () {
    return {
      tableData: [{
    commentId: 1,
    avatar: './image.png',
    userType: 1
    }], tableConfig: { size: 'mini', headerRowClassName: 'table-header', cells: [ { prop: 'avatar', label: '用户头像', mWidth: 50, slot: true }, { prop: 'userType', label: '用户身份', mWidth: 60, formatter: this.formatUserType }, { fixed: 'right', prop: 'btns', label: '审核', mWidth: 80, slot: true } ] }, // 翻页 pageConfig: { total: 0, pageNo: 1, pageSize: 50 } } }, methods: { formatUserType (row) { let userTypes = new Map([ [1, '学生'], [2, '老师'] ]) return userTypes.get(row.userType) },
}

 

上一篇:学习Java绕不过去的--冒泡排序。


下一篇:php直播平台源码如何设置聊天相关功能