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)
    },
}