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